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What will you learn from this book? 

Ever wished there were a j Query book that doesn’t assume you also 
know JavaScript right out of the gate? Have you heard that j Query 
can help you add interactivity to your websites and apps，but don’t 
know where to start? 

Head First jQuery is your express ticket to engaging, interactive web¬ 
sites that look and feel like real applications. 
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What’s so special about this book? 

We think your time is too valuable to waste struggling with new con¬ 
cepts. Using the latest research in cognitive science and learning 
theory to craft a multisensory learning experience, Head First jQuery 
uses a visually rich format designed for the way your brain works, 
not a text-heavy approach that puts you to sleep. 
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u jQuery makes doing 
amazing things with 
JavaScript so easy it 
feels like cheating. 
This book demon¬ 
strates how to solve 
real-world problems 
quickly. As a bonus, 
you’ll learn key 
aspects of JavaScript, 
how to set up a web 
development environ¬ 
ment, and some PHP/ 
MySQL. This is a solid 
book.” 

— Jim Doran 
Software engineer at Johns 
Hopkins University 

“Unlike those abstruse 
programming books 
filled with technical 
jargon, Head First 
jQuery guides begin¬ 
ners through the 
steps to create their 
first j Query pages 
in a fun and under¬ 
standable way. ” 

— Lindsey Skouras 
Attorney and self-taught 
programmer 






































Advance Praise for Head First jQuery 


u j Query makes doing amazing things with JavaScript so easy it feels like cheating. This book 
demonstrates how to solve real-world problems quickly. As a bonus, you’ll learn key aspects of JavaScript, 
how to set up a web development environment, and some PHP/MySQL. This is a solid book.” 

— Jim Doran, software engineer at Johns Hopkins University 

“Unlike those abstruse programming books filled with technical jargon, Head First jQuery guides beginners 
through the steps to create their first jQuery pages in a fun and understandable way.” 

— Lindsey Skouras, attorney and self-taught programmer 

“Ryan Benedetti and Ronan Granley have taken a potentially intimidating stew of technologies (jQuery, 
DOM, Ajax, HTML5, CSS) and broken them down into approachable concepts that actually make 
learning the material fun.” 

— Bill Mietelski，software engineer 

“JavaScript has reemerged as a programming language of some merit due in no small part to a collection 
of best-of-breed add-on libraries, of which jQuery is a key player. Head First jQuery provides the modern 
web developer with a focused heads-up and hands-on treatment to this key JavaScript technology.” 

— Paul Barry, author and lecturer on computing at the Institute of Technology ， 


Praise for other Head First books 


“Head First Object- Oriented Analysis and Design is a refreshing look at subject of OOAD. What sets this book 
apart is its focus on learning. The authors have made the content of OOAD accessible, usable for the 
practitioner.” 

— Ivar Jacobson, Ivar Jacobson Consulting 


“I just finished reading HF OOA&D and I loved it! The thing I liked most about this book was its focus 
on why we do OOA&D — to write great software!” 

— Kyle Brown, Distinguished Engineer, IBM 

“Hidden behind the funny pictures and crazy fonts is a serious, intelligent, extremely well-crafted 
presentation of OO Analysis and Design. As I read the book, I felt like I was looking over the shoulder 
of an expert designer who was explaining to me what issues were important at each step, and why.” 

— Edward Sciore, Associate Professor, Computer Science Department, 

Boston College 


U A11 in all, Head First Software Development is a great resource for anyone wanting to formalize their 
programming skills in a way that constantly engages the reader on many different levels.” 

— Andy Hudson，Linux Format 


“If you’re a new software developer, Head First Software Development will get you started off on the right foot. 
And if you’re an experienced (read: long-time) developer, don’t be so quick to dismiss this....，’ 

— Thomas Duff ， Duffbert’s Random Musings 


“There’s something in Head First Java for everyone. Visual learners, kinesthetic learners, everyone can 
learn from this book. Visual aids make things easier to remember, and the book is written in a very 

accessible style — very different from most Java manuals Head First Java is a valuable book. I can 

see the Head First books used in the classroom, whether in high schools or adult ed classes. And I will 
definitely be referring back to this book, and referring others to it as well.” 


— Warren Kelly, Blogcritics.org, March 2006 


“Rather than textbook-style learning, Head First iPhone and iPad Development brings a humorous, engaging, 
and even enjoyable approach to learning iOS development. With coverage of key technologies, including 
core data, and even crucial aspects such as interface design, the content is aptly chosen and top-notch. 
Where else could you witness a fireside chat between a UlWebView and UITextField!” 

— Sean Murphy, iOS designer and developer 




Praise for other Head First books 


“Another nice thing about Head First Java, Second Edition, is that it whets the appetite for more. With later 
coverage of more advanced topics such as Swing and RMI，you just can’t wait to dive into those APIs 
and code that flawless, 100,000-line program onJava.net that will bring you fame and venture-capital 
fortune. There’s also a great deal of material, and even some best practices, on networking and threads— 
my own weak spot. In this case, I couldn’t help but crack up a little when the authors use a 1950s 
telephone operator — yeah, you got it, that lady with a beehive hairdo that manually hooks in patch 
lines — as an analogy for TCP/IP ports.. .you really should go to the bookstore and thumb through Head 
First Java, Second Edition. Even if you already know Java, you may pick up a thing or two. And if not, just 
thumbing through the pages is a great deal of fun.” 

— Robert Eckstein, Java.sun.com 

“Of course it’s not the range of material that makes Head First Java stand out, it’s the style and approach. 
This book is about as far removed from a computer science textbook or technical manual as you can get 
[with its] use of cartoons, quizzes, fridge magnets (yep, fridge magnets...). And, in place of the usual 
kind of reader exercises, you are asked to pretend to be the compiler and compile the code, or perhaps 
to piece some code together by filling in the blanks or...you get the picture".. The first edition of this 
book was one of our recommended titles for those new to Java and objects. This new edition doesn’t 
disappoint and rightfully steps into the shoes of its predecessor. If you are one of those people who falls 
asleep with a traditional computer book, then this one is likely to keep you awake and learning.” 

— TechBookReport.com 


“Head First Web Design is your ticket to mastering all of these complex topics, and understanding what’s 
really going on in the world of web design. ...If you have not been baptized by fire in using something 
as involved as Dreamweaver, then this book will be a great way to learn good web design. ’’ 

— Robert Pritchett, MacCompanion 


“Is it possible to learn real web design from a book format? Head First Web Design is the key to designing 
user-friendly sites, from customer requirements to hand-drawn storyboards to online sites that work 
well. What sets this apart from other ‘how to build a website’ books is that it uses the latest research 
in cognitive science and learning to provide a visual learning experience rich in images and designed 
for how the brain works and learns best. The result is a powerful tribute to web design basics that any 
general-interest computer library will find an important key to success.” 

— Diane C. Donovan，California Bookwatch: The Computer Shelf 


“I definitely recommend Head First Web Design to all of my fellow programmers who want to get a grip on 
the more artistic side of the business. ’’ 


— Claron TwitcheU, Utah Java User Group 
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getting started with jQuery 

Web page action 

You want more for your web pages. 

You’ve got HTML and CSS under your belt and want to add scripting to your 
skill set, but you don’t want to spend your life writing lines and lines of script. You 
need a scripting library that allows you to change web pages on the fly. And 
since we’re wishing, can it play well with AJAX and PHP, too? Can it do in 
3 lines of code what most client-side languages do in 15? Wishful thinking? 
No way! You need to meet jQuery. 
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You want web page power 
HTML and CSS are fine, but... 

.• .you need the power of script 
Enter jQuery (and JavaScript)! 
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jQuery makes the DOM less scary 
How does that work? 

jQuery selects elements the same way CSS does 

Style, meet script 

jQuery selectors at your service 

jQuery in translation 

Your first jQuery gig 

Set up your HTML and CSS files 

Slide on in... 

May the fade be with you 


2 

3 

4 

5 

7 

8 
9 
11 

13 

14 

15 

16 
20 
24 
26 
27 


You rescued the Furry Friends campaign 30 

Your jQuery Toolbox 33 


X 




Move the element up. 


JavaScript 

interpreter 








table of contents 


selectors and HletliPcIs 



Grab and go 

jQuery helps you grab web page elements and do all kinds 

of things with them. In this chapter, we’ll dig into jQuery selectors and methods. With 
jQuery selectors, we can grab elements on our page, and with methods we can do 
stuff to those elements. Like a massive book of magic spells, the jQuery library lets us 
change tons of things on the fly. We can make images disappear and reappear out of 
thin air. We can select a certain piece of text and animate the change to its font size. 
So, on with the show — let’s grab some web page elements and go! 
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jQuery eVents and {imotfcns 

Making things happen on your page 

jQuery makes it easy to add action and 
interactivity to any web page, in this chapter, well 

look at making your page react when people interact with it. 

Making your code run in response to user actions takes your 
website to a whole new level. We’ll also look at building reusable 
functions so you can write the code once and use it multiple times. 
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Mod the DOM 

Just because the page is finished loading doesn’t 
mean it has to keep the same structure. Back in 

Chapter 1, we saw how the DOM gets built as the page loads to set up 
the page’s structure. In this chapter, we’ll look at how to move up and down 
through the DOM structure and work with element hierarchy and parent/ 
child relationships to change the page structure on the fly using jQuery. 
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jQuery ejects and animation 



little glide in your stride 

aking things happen on you page is all well and good, 

t if you can’t make it look cool, people won’t want to use your site. That’s 
where jQuery effects and animation come in. In this chapter, you’ll learn how to 
make elements transition on your page over time, show or hide specific pieces 
of elements that are relevant, and shrink or grow an element on the page, all 
before your users’ eyes. You’ll also see how to schedule these animations so they 
happen at various intervals to give your page a very dynamic appearance. 
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DoodleStuff needs a web app 
Do the Monster Mashup 

Monster Mashup needs layout and positioning 

A little more structure and style 

Make the interface click 
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jQuery and JavaScript 



-LukejQuery, I am your father! 

jQuery can’t do it all alone. Although it is a 

JavaScript library, unfortunately it can’t do everything its parent 
language can do. In this chapter, well look at some of the 
features of JavaScript that you’ll need to create really compelling 
sites, and how jQuery can use them to create custom lists and 
objects as well as loop through those lists and objects to make 
your life much easier. 
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hat have you done for me lately? 

hen you combine jQuery’s custom effects with 

vaScript functions you can make your code — and your web app — 
ore efficient, more effective, and more powerful. In this chapter, 
you’ll dig deeper into improving your jQuery effects by handling 
browser events, working with timed functions, and improving the 
organization and reusability of your custom JavaScript functions. 
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Please pass the data 

Using jQuery to do some cool CSS and DOM tricks is fun, 

but soon you’ll need to read information (or data) from a server and display it. You 
may even have to update small pieces of the page with the information from the server, 
without having to reload the page. Enter Ajax. Combined with jQuery and JavaScript, it 
can do just that. In this chapter, we’ll learn how jQuery deals with making Ajax calls to 
the server and what it can do with the information returned. 
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so hook your place early! 
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Client，meet server 

As useful as reading data from an XML file was, that 
won’t always cut the mustard. A more efficient data interchange 
format (JavaScript Object Notation, aka JSON) will make it easier to get data 
from the server side. JSON is easier to generate and read than XML, too. Using 


jQuery, PHP, and SQL, you’ll learn how to create a database to store information 


so you can retrieve it later, using JSON, and display it on the screen using jQuery. 


A true web application superpower! 
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Extreme form makeover 

The Web lives and dies by users and their data. 

Collecting data from users is a big business and can be a time- 
consuming challenge for a web developer. You’ve seen how jQuery can 
help make Ajax, PHP, and MySQL web apps work more effectively. Now 


let’s look at how jQuery can help us build the user interface for the forms 


that collect data from users. Along the way, you’ll get a healthy dose of 



jQuery UI, the official user interface library for jQuery. 
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Objects, objects everywhere 


As talented a developer as you are, you can’t do it all 

alone... WeVe seen how we can include jQuery plug-ins, like jQuery Ul or 
the tabs navigation to help boost our jQuery app, without much effort. To take 
our applications to the next level, apply some of the really cool tools out there 
on the Internet, and use information provided by the big hitters — like Google, 
Twitter, or Yahoo! — we need something...more. Those companies, and many 
others, provide APIs (application programming interfaces) to their services so 
you can include them in your site. In this chapter, we’ll look at some API basics 
and use a very common one: the Google Maps API. 
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Even after all that, there’s still plenty we didn’t get 

around to. There are lots of other jQuery and JavaScript goodies we 
didn’t manage to squeeze into the book. It would be unfair not to tell you 
about them, so you can be more prepared for any other facet of jQuery you 
might encounter on your travels. 
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set up a development enVirpnment 

Get ready for the big times 

You need a place to practice your newfound PHP 
skills without making your data vulnerable on the Web. 

It’s always a good idea to have a safe place to develop your PHP application 
before unleashing it on the world (wide web). This appendix contains 
instructions for installing a web server, MySQL, and PHP to give you a safe 
place to work and practice. 
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how to use this book 


Who is this book for? 


If you can answer “yes” to all of these: 


① 

② 


Do you have previous web design or development 
experience? 

Do you want to learn, understand, remember, and 
apply important jQuery and JavaScript concepts so 
that you can make your web pages more interactive 
and exciting? 


H ： 产仏 心 | y h 咖 J you^c al^ady 
含。七 some dhops, -too. 

with JavaS^vip-t is 
bu-t dc-fihi-tcly hot irc<\ui^d. 


(5) Do you prefer stimulating dinner-party conversation 
to dry, dull, academic lectures? 


this book is for you. 


Who should probably back away from this book? 


If you can answer “yes” to any of these: 

^T) Are you completely new to web development? 



© Are you already developing web apps and looking for a 
reference book on jQuery? 


Chc^k ou-t Head Fiv-s-t HTML 
CSS f XHTML ^ ah 

cx^dlchi ih-tirodu^ioh -to web 
devdopmeh-t, ahd -thch dome 
kk ahd joih us ih j^uc^yvillc. 


^ 3 ) Are you afraid to try something different? Would 
you rather have a root canal than mix stripes with 
plaid? Do you believe that a technical book can’t be 
serious if Bigfoot is in it? 

this book is not for you. 


C ^ ic ^ This book 

义士 oir a^yohc with a ^edii 匕扣 d. 
0 、 Qsk Cash is hi^, -too. —EdJ 
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the intro 


Wc know what you're thinking. 


cc 


u 


How can this be a serious jQuery development book? 
What’s with all the graphics?” 

Gan I actually learn it this way?” 








And we know what your brain is thinking. 

Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 

So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real]oh — recording things that matter. It doesn’t bother saving 
the boring things; they never make it past the “this is obviously not 
important” filter. 

How does your brain know what’s important? Suppose you’re out for 
a day hike and a tiger jumps in front of you. What happens inside your 
head and body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows … 

This must be important! Don’t forget it! 

But imagine you’re at home or in a library. It’s a safe, warm, tiger-free zone. \/ oV v ^ 

You’re studying. Getting ready for an exam. Or trying to learn some tough 丁\\\孓 ' SYX ^ 
technical topic your boss thinks will take a week, 10 days at the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s trying to make 
sure that this obviously unimportant content doesn’t clutter up scarce resources. 

Resources that are better spent storing the really big things. Like tigers. Like 
the danger of fire. Like how you should never again snowboard in 
shorts. 

And there’s no simple way to tell your brain, “Hey, brain, thank you 
very much, but no matter how dull this book is, and how little I’m 
registering on the emotional Richter scale right now, I really do want 
you to keep this stuff around.” 
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Metacognition: thinking about thinking 


If you really want to learn, and you want to learn more quickly and more deeply, 
pay attention to how you pay attention. Think about how you think. Learn how you 
learn. 

Most of us did not take courses on metacognition or learning theory when we were 
growing up. We were expected to learn, but rarely taught to learn. 


I wonder how I 
can trick my brain 
into remembering 
this stuff... 



So just how DO you get your brain to think that jQuery 
development is a hungry tiger? 


But we assume that if you’re holding this book, you really want to learn about 
jQuery. And you probably don’t want to spend a lot of time. And since you’re going 
to work with it more in the future, you need to remember what you read. And for that, 
you’ve got to understand it. To get the most from this book, or any book or learning 
experience, take responsibility for your brain. Your brain on this content. 


The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 


There’s the slow, tedious way, or the faster, more effective way. The slow way is 
about sheer repetition. You obviously know that you are able to learn and remember even 
the dullest of topics if you keep pounding the same thing into your brain. With enough 
repetition, your brain says, “This doesn’t feel important to him, but he keeps looking at 
the same thing over and over and over, so I suppose it must be.” 


The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning. 
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Here's what WE did: 


We used pictures^ because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in 
the text somewhere. 

We used redundancy, saying the same thing in different ways and with different media 
types, and multiple senses, to increase the chance that the content gets coded into more than 
one area of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for 
novelty, and we used pictures and ideas with at least some emotional content, because your 
brain is tuned to pay attention to the biochemistry of emotions. That which causes you to 
feel something is more likely to be remembered, even if that feeling is nothing more than a 

little humor, surprise, or interest. 

We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included loads of activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-doable, because that’s what most people prefer. 

We used multiple learning styles, because might prefer step-by-step procedures, 
while someone else wants to understand the big picture first, and someone else just wants 
to see an example. But regardless of your own learning preference, everyone benefits from 
seeing the same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain 
you engage, the more likely you are to learn and remember, and the longer you can stay 
focused. Since working one side of the brain often means giving the other side a chance to 
rest, you can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view ， 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work 
at something. Think about it — you can’t get your body in shape just by watching people at 
the gym. But we did our best to make sure that when you’re working hard, it’s on the right 
things. you } re not spending one extra dendrite processing a hard-to-understand 
example, or parsing difficult, jargon-laden, or overly terse text. 

We people. In stories, examples, pictures, etc., because, well, because j ⑽ Ye a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain iwto submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cui ihis si^k a 

伽 youir 


^T) Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

( 2 ) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3) Read the “There are No Dumb Questions.” 

That means all of them. They’re not optional 
sidebars — they We part of the core content! 

Don’t skip them. 

(4) Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

( 5 ^ Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

^7) Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

( 8 ) Feel something! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

Create something! 

Apply this to your daily work; use what you are 
learning to make decisions on your projects. Just 
do something to get some experience beyond the 
exercises and activities in this book. All you need 
is a pencil and a problem to solve ".a problem that 
might benefit from using the tools and techniques 
you’re studying for the exam. 
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how to use this book 


Read me 

This is a learning experience, not a reference book. We deliberately stripped out everything 
that might get in the way of learning whatever it is we’re working on at that point in the 
book. And the first time through, you need to begin at the beginning, because the book 
makes assumptions about what you’ve already seen and learned. 

We expect you to know HTML and CSS. 

If you don’t know HTML and CSS, pick up a copy of Head First HTML with CSS & 
XHTML before starting this book. We will do some refreshers on CSS selectors, but don’t 
expect to learn all of what you need to know about CSS here. 

We don’t expect you to know JavaScript. 

We know, we know.. .this is a controversial opinion, but we feel that you can learn jQuery 
without knowing JavaScript first. You need to know some JavaScript to write j Query, and 
we teach you all those important JavaScript concepts side-by-side with the j Query code. We 
truly and deeply believe in the j Query motto: Write Less. Do More. 

We encourage you to use more than one browser with this book. 

We encourage you to test your pages using at least three up-to-date browsers. This will give 
you experience in seeing the differences among browsers and in creating pages that work 
well in a variety of browsers. 

This is not Head First Browser Dev Tools... 


•. .but we expect you to know how to use them. We highly recommend Google Chrome, 
which you can download here: http:/ / www.google.com/chrome. You can visit the following 
sites for more information on the following browsers and their dev tools: 


Google Chrome 

http:/ / code.google.com/chrome/ devtools/docs/ overview.html 

Firefox’s Firebug 

http:/ /getfirebug.com/ wiki/ index.php / FAQ^ 

Safari 

http:/ / www. apple. com / s afari /features .html#developer 

Internet Explorer 8 

http:/ / msdn.microsoft.com/ en-us / library / dd565628(v—vs. 85).aspx 

Internet Explorer 9 

http:/ / msdn . micro soft, com / en-us / ie / aa740478 

Opera’s Dragonfly 

http:/ / www. opera .com/ dragonfly/ 


We expect you to go beyond this book 

The best thing you can do when you’re learning something new is to join a learning 
community. We feel that the j Query community is one of the best and most active 
communities in the world of technology. You can find out more here: http:/ / www.jquery.com. 
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The activities are NOT optional. 


The exercises and activities are not add-ons; they’re part of the core content of the 
book. Some of them are to help with memory, some are for understanding, and 
some will help you apply what you’ve learned. Don } t skip the exercises. Even 
crossword puzzles are important — they’ll help get concepts into your brain. But more 
importantly, they’re good for giving your brain a chance to think about the words and 
terms you’ve been learning in a different context. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books 
don’t have retention and recall as a goal, but this book is about learning, so you’ll see 
some of the same concepts come up more than once. 

The Brain Power exercises don’t have answers. 


For some of them, there is no right answer, and for others, part of the learning 
experience of the Brain Power activities is for you to decide if and when your answers 
are right. In some of the Brain Power exercises, you will find hints to point you in the 
right direction. 

Software requirements 

To write jQuery code, you need a text editor, a browser, a web server (it can be locally 
hosted on your personal desktop), and the j Query library. 

The text editors we recommend for Windows are PSPad, TextPad, or EditPlus (but 
you can use Notepad if you have to). The text editor we recommend for Mac is 
TextWrangler. If you’re on a Linux system, you’ve got plenty of text editors built in, 
and we trust you don’t need us to tell you about them. 

If you are going to do web development, you need a web server. For the later chapters 
(9, 10, and 11), you need to go to the appendix on installing PHP, MySQL, and a web 
server (Apache or IIS) and follow the instructions. We recommend doing that now. No, 
seriously, head there now, follow the instructions, and come back to this page when 
you’re done. 

You’ll also need a browser, and you’ll need to use the Browser Developer tools. Please 
read the previous page. Learning how to use the JavaScript console in Google’s Chrome 
Dev Tools is well worth the time. This is homework you need to do on your own. 

Last of all, you need the j Query library; turn the page and we’ll show you where to get it. 
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download jftuGry 

It’s time to dive in. Head over to the jQuery website and 
download a copy to use throughout this book. 


Step One: 


Open your favorite browser and point it to this 
address: http:/ / www.jquery.com. 


Step Two: 

Find the section labeled “Grab the Latest 



Version!” Then, select the checkbox next to 
“Production.” 


Step Three: 


Click the “Download jQjiery” button. 


Step Four: 



THE LATEST VERSION! 


YOUR COMPRESSION 


: (26KB 9 Minified and Qzipped) 
OPMENT (179KB, Uncompressed Code) 


Down load ( yQuer/ ); 


The next page you’ll see will look something like this. 
Save the page into a folder called scripts on your drive 


N«wT*b 

New Window 


KT 


Npw Incognito Window OXN 
Reopen Clostd Tab OXT 

Open Hit.., HO 

Open Location... XL 


^ortcu 



1 cod«.jqucrY.co«n/jqu«ry-1 • v 

C , O code.>query.com/jqu«fy-1.4.4.min.js 


• jQuAry JaviiScript Library vl . 4.4 

• bilpi//jquocy.oun/ 

• Copyright 2010 ， John Resig 

• Dual licensed under lh« NZT or OPL Version 2 癱 * 

• httpt//jquory.org/license 

• 

• Include* Slscla. 

• http://sizzloja.can/ 

• CApyrighfc 2010 , TK« Da jo PAundAfcion 

• R«lv«»«rd und«c ih« M 2 T» BSD* «nd CPL Lic«n»os. 


• D«iai Thu Nov 11 19 i04iS3 2010 -0500 



sd\rip*ts 


What’s the difference between the Production and 
Development versions? 

The Production version of j Query is a minified version, intended for speed 
of execution on a web server. The Development version is intended for 
developers interested in exploring and extending the inner workings of the 
j Query library. Get a copy of both if you’re the type who likes to have a look 
inside the engine. 
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Folder setup 

After downloading and unzipping the code for the book from Head First labs 
{http:/ / www.headfirstlabs.com/books/hffquery), you’ll find that it’s structured in 
folders organized by each chapter. Let’s look at ch03, for example: 


TKcv-c s d -foldcv 
Code -fov- l*t- 

The ihdcx.h^| 
^OhtaihS £hc 
+ olr web app. 






begin 

i_ images 
Endex.html 
LL scripts 


the 7 

do>wy\lo3<ic(l- 


二 s styles 


f ~l end 


pts j/ Thc s iylcs -Poldcv- ^Oh^ihs 

jque 17-1.6 - Z.min.js / a ^y^iylc^ss file -that 

2 S all the s-tylcs -Po^ 

my.stylexss ^ ihe bc 9 ihhih 9 ^ 


The end folder of every chapter contains the final code for that chapter. We 
encourage you to use the end folder only when you need it for reference. 



D Ch 03 

► 二 begin 
▼ {_ end 

► Q Images 
Q Index』 htm I 


TV wv stnfb.js -file t 。 山 … s 如 

〜dc —’“U c 

{jo sbrticM 70 UV Warn by 1 六 3 

at i\s\s unless you alosolutclv V^avc to. 




Pi scripts 

.Jquerv-l.6-2.min.js 

，/ m v 一 scriptsJs ^ - 

I ~； styles 



You can use the j Query library in any of your own projects. For your 
convenience, we include the j Query library in the code folder for the book, but 
you need to know where to get it for use in future projects and for when the 
j Query library is updated. The j Query folks update the library regularly. 
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The technical review team 

Uhdscy Skouv-as 



Jim Doran works as a software engineer at Johns Hopkins University in Baltimore, Maryland. He teaches JavaScript 
at the Community College of Baltimore County and speaks about jQuery at web conferences. When not doing these 
things, Jim blogs his art at http://jimdomn.net and skates in a coed roller derby league. 


Bill Mietelski has been a technical reviewer of several Head First titles. He’s currently a software engineer at a 
leading national academic medical center in the Ghicagoland area, working on biostatistical research. When he’s not 
collecting or shepherding data, you’ll find him at a local golf course chasing a little white ball. 


Lindsey Skouras is an attorney in the Washington, DC, area. She has been teaching herself how to code in her spare 
time by working her way through the Head First series. Her other interests include reading, crafting, visiting museums, 
and spending time with her husband and dogs. 

Paul Barry lectures in computing at the Institute ofTechnology, Carlow, in Ireland. Paul is a contributing editor to 
Linux Journal magazine as well as a published technical author. He is also the author of Head First Python and coauthor 
of Head First Programming. When he gets time, Paul consults with SMEs and startups on software development projects. 
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intro 


1 getting stcirted Witfc jQuery 


參 Web page action ♦ 



You want more for your web pages. You’ve got HTML and CSS 

under your belt and want to add scripting to your skill set, but you don’t want to spend your 
life writing lines and lines of script. You need a scripting library that allows you to change web 
pages on the fly. And since we’re wishing, can it play well with AJAX and PHP, too? 

Can it do in 3 lines of code what most client-side languages do in 15? Wishful thinking? 
No way! You need to meet jQuery. 


this is a new chapter 








get things moving 


Dynamically add elements to the web page without reloading every time. 
Change menu items when users mouse over them. 

Alert your user when a form field is missing. 

Add motion and transitions to text and pictures. 

Load data from a server just when a user needs it. 


You want web page power 

You already know how to build great-looking web pages with clean, valid 
HTML and CSS. But static web pages just don’t cut it anymore — people 
want a responsive web page. They want action, animation, interaction, and 
lots of cool effects. 


My clients love my web 
page designs, but they 
want more interactivity. 


O 




^>arpen your pencil 


mm 


Do you want to take control of your web pages and make them more useful 
for your visitors? Check all the options that apply from the list below: 


□ □ □ □ □ 
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getting started with jquery 


HTML and CSS are fiwc, but... 

Plain old HTML and CSS are good for giving your page structure and style. 
Once you have a rendered HTML page, it’s there, but it’s static. 

What if you want to change how the page looks, or add or remove 
something from it? You either have to do some really crazy CSS gymnastics, 
or you simply have to load a new page. And that can get ugly fast. Why? 
Because all you’re really doing with HTML and CSS is controlling how a 
page is displayed. 



The browser requests a web page from 
a server when someone types a web 
address into the browsers URL bar. 




index.html 


The server finds the 
requested file(s) and sends 
them to the browser. 




The browser displays a rendered HTML page 
based on the file sent from the server. 




The b\roy/sc\r loads 
七 k page dhd displays 

it to the USCV-. 
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stick to the script 


..you need the power of script 

To change your web pages on the fly, without reloading, you need to 
talk to your browser. How do you pull that off? With an HTML tag 
known as <script>. 



But how do I give the browser 
directions? That seems kinda 
unusual... 



Great question. Remember that HTML 
is a markup language that handles 
document structure. 

And cascading style sheets (CSS) control the 
look and feel and position of those elements. 
HTML and CSS control how a web page is 
built and displayed, but neither of them can add 
behavior to the web page. What we need for that 
is a scripting language. What we need is jQuery. 
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getting started with jquery 


Ewter jftuery (awd JavaScript)! 


The language we use to give the browser directions is JavaScript. 
Every browser comes with a built-in JavaScript interpreter that takes 
the directions you write in between the <script> tags and translates 
those directions into different kinds of action on the web page. 



TV JavaWi? 七 m*bc^c*bcv 
%s 七 cW k events 仏 a 七 
ov\ *bV^c pay, like ^ 

rwouSC —乙 l' 1 乙 k. 


To give the interpreter directions, you ultimately 
need to speak JavaScript. But don’t worry! This is 
where j Query comes in. j Query is a JavaScript library 
specialized for changing web page documents on the fly. 
Let’s check some j Query out. 



Hey, browser, update that 
img element for me, will ya? 


丁 he JavaS^v-ip-t ih-tcvpvctcv* 
give the b\rov/scv- 
dorwmahds -too. 


jQueiy is a JavaScript 
library specialized lor 
ckanging wet page 
documents on tke ily. 


i^barpen your pencil 


The script below dynamically changes a web page. Read each line and think 
about what it might do based on what you already know about HTML and 
CSS. Then, write down what you think the code does. If you’re not sure what 
a line does, it’s perfectly OK to guess. We did one for you. 


<script> 

$(document).ready(function(){ 

$ ( "button") .click(function() { 
$ ( M hl") .hide("slow"); 

$ ( M h2") .show("fast"); 

$("img").slideUp(); 

})； 

})； 

</script 〉 



W\\cy\ 七 he y/cb do 乙 umerrt is ready, do wha*t’s below. 
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sharpen solution 


i^arpen your pencil 


The script below dynamically changes a web page. Read each line and think 
about what it might do based on what you already know about HTML and 
CSS. Then, write down what you think the code does. If you’re not sure what 
a line does, it’s perfectly OK to guess. Here’s our solution. 


<script> 


(document).ready(function(){ 

$ ( "button") .click(function() { 
$ ( "hi") .hide("slow"); 

$("h2").show("fast"); 


("img").slideUp() 


})； 


})； 

</script> 



W\\cy\ web do 乙 umerrt is ready, do whats below. 


W\\tv\ bu*t*bo 扒 dcimCh*t is dlidked ； do -this s*tud: 

Make all hi disappear slowly -from -the page. 

Make all KZ clc^ch*ts show <^uidkly oy\ -the page. 


Make all clcmch-b slide upy/avd and disappear. 


Ehd dlidk -fuhd*tior\. 


Ehd dodumch*t v-cady -fur\d*tior\. 



o 


o 


But if I don't refresh the browser, 
how does the browser know to hide 
an element or slide it up? 



That’s a great question. It does 
seem a bit like magic, right? 

Let’s look at a web page from the 
perspective of the browser — specifically, 
how jQuery can change the web page from 
within the browser. 
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getting started with jquery 


Look into the browser 

It’s time to pull back the curtain to see what’s really going on behind a web page as a 
browser displays it. Your browser uses the HTML Document Object Model (DOM) 
to build a page from simple HTML markup and CSS code into a clickable page 
complete with text, images, videos, and all the other great content we love to browse. 
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dem DOM bones 


The hidden structure of a web page 

Over the years, the DOM has helped HTML, CSS, and JavaScript work together 
more effectively. It provides a standardized skeleton that all modern browsers use 
to make browsing the Web more effective. Many people think of the DOM as 
being built like a tree: it has a root and branches with nodes at the end. Alternatively, 
you can think of it as an x-ray for how the page is built. 



html 


_ w 


The <WW> is 七 ^ 

Voof 


Each pa\rt o-P the 

,s 匕 ailed a 


… / 

131 MB 


七 ha 七匕 omspernds 
"to <lvW> tag is 扣 
clcrwc^-t m>de 广 


“DOM Bones ， 


■mg 





癱 


I 户 1 



“Toe bone 
connected 
to your 
foot bone” 


“Foot bone 
connected 
to your 
ankle bone” 


An x-ray tells a doctor what’s going on with the body’s hidden 
structure. Like an x-ray, the DOM shows us the hidden structure 
behind the page. But unlike an x-ray, JavaScript and jQuery use 
the DOM to change the structure on the page. 


“Ankle bone 
connected 
to your 
leq bone” 
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getting started with jquery 


jClucry makes the POM less scary 

The DOM can seem complex and intimidating, but luckily for us, jQuery keeps it 
simple. Don’t forget: j Query zj JavaScript, but a much more approachable version. 
When you want to control the DOM, j Query makes it much easier. For instance, let’s 
say we want to change the HTML inside of the only paragraph element on our page. 


The raw JavaScript way 

峰 ㈣ SSSv 


document.getElementsByTagName( n p r 
[0].innerHTML = "Change the page. 


me *thc 


V 





The jQuery way 

^rafe 啪 c a Change the ttT/WL o( 

pay 一 eleme 此 element h> 

-these pav-chthcscs. 



( n p f, ) . html ("Change the page ."); 



uses a Vlcd^r 

you ^ at 

4 sclc^s just like docs. 


Or let’s say we want to change the HTML inside of 
Jive paragraph elements on our page: 


Loop *bWou^ 

^ clcmc^-b I _ 七 *to Aa%c. 

for (i = 0; i <= 4; i++) 


document.getElementsByTagName("p 
i].innerHTML= M Change the page"; 


j 

w'C *bV>c clcwc^x- 
Y/cVc o^lCY- 


Because j6^ucv-y uses CSS 
sdc^-tovs, wc dah say i-t the 
same way as above. 

$( n p n ).html("Change the page."); 


One of j Query’s main strengths is that it allows you to work with the DOM 
without having to know every little thing about it. Underneath it all, JavaScript is 
doing the heavy lifting. Throughout this book, you’ll learn to use JavaScript and 
j Query together. In Chapter 6, we’ll learn more about j Query ? s relationship to 
JavaScript, and we’ll beef up our JavaScript skills along the way. For now, when 
you need to work with the DOM, you’ll use j Query. 

Let’s take jQuery for a spin around DOM-ville, shall we? 
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ready bake code 


k 鄉 9 BaK 会 

0>pe 


Enter the following code into a text editor. Then save it, open it in your 
browser, and try out each of the buttons. (It won’t hurt to take a look at 
the code and try to figure out what it’s doing while you’re at it...) 


<!DOCTYPE html> 

<htmlxhead> <title>jQuery goes to DOM-ville</title> 
<style> 

#change_me { 

position : absolute; 

top : lOOpx; 

left : 400px; 

font : 24px arial;} 

#move_up #move_down #color ^disappear { 
padding : 5px;} 

</style> 

<script src="scripts/jquery-1.6.2.min.j s"></script 〉 
</head> 

<body> 


<button id: 
<button id: 
<button id: 
<button id= 


〖 move_up n >Move Up</button> 

, move_down">Move Down</button> 

'color M >Change Color</button> 

'disappear">Disappear/Re-appear</button> 


<div id= M change_me M >Make Me Do Stuff!</div> 

<script> 

$(document) .ready(function () { 

$("#move_up").click( function() { 

$( n #change_me").animate({top:30},200); 

}); // end move—up 

$("#move_down M ).click( function() { 

$( M #change_me").animate({top:500},2000) 
});//end move—down 
$( "#color")•click( function() { 

$ ( n #change_me" ) . css ( "color" "purple"); 
})',//end color 

$("^disappear").click( function() { 

$( M #change_me").toggle("slow"); 

});//end disappear 
})',//end doc ready 
</script 〉 


</body> 

</html> 
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getting started with jquery 


How does thatmrW! 

Pretty nifty how jQuery can manipulate the page, isn’t it? The important part 
to keep in mind is that none of the original HTML and CSS changed 

when you pressed each button. So how did j Query do it? Check it out: 


o The visitor clicks a button. 



Pi jQuery Meets the DOM 


‘ 一 \—I 


c o 


’ Move Up 〉 ( Move Down 

T 、 


Add Color) Disappear/Re-appear 、 


Make Me A Do Stuff! 


M 甘 



you see in the browser 


❺ 


\/ Behind 

the Scenes 


The JavaScript interpreter 
u hears #, the click event and runs 
the function attached to it. 




The visitor sees 
the element move 
up the page. 


o 




The JavaScript interpreter 
changes the DOM 
representation of the page. 


OK, OK, just tell 
me what to do. 



DOM version 
of the page 


JavaScript 

interpreter 


Tke JavaScript interpreter doesn’t ckange 
tke original HTML anct CSS liles. It makes 
ckanges to tke DOM’s representation ol tke 
page in tke browser s memory. 
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jquery functions 


Whafs with all of those 
dollar signs in the code? 



The dollar sign represents all of the cash you’ll rake in with your 
newly acquired jQuery skills. Kidding, but it does bring home the 
bacon in the j Query world. 

Introducing the jQuery function (and shortcut) 

The dollar sign with the parentheses is the shorter name of 
the j Query function. This shortcut saves us from writing 
：i j Query () ’’ every time we want to call the j Query function. The 
j Query function is also often referred to as the j Query wrapper. 


jQuery( 



TWis is i\\t j 公叫 WW ， 
^OSC Y/V^olc job is yra/o\>\^ 
clcmorrb you put *rn*to 


This is j6^ucv-y shovidut Instead 
o*P six. dKav-at*tcv-s 七 ' 

make uf> you jus 七 *tyfc or>c. 


$( 


The short name and the long name point to the same thing: the 
big code block known as j Query. Throughout this book, we’ll use 
the shortcut. Here are three different things you can put into the 
j Query function. 



|-f you f u 七 a o( 

HTML m \\tyt, you 
add POM *to *tV>c 

bvov/sev oy\ 七 he -fly* 


r 

you put a CSS sclc^-tov- 
j 卜 y will you the sci o( 

elects thai r.atdh that 
This ,s ihc oh C youll use the most. 


poh ’ 七 y/ov” *bo 。 ^\aCM 
about 七 Wis v •吵七 

m>y/. Well tovcv- i*t m 
la-tcv- 七 c". 
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getting started with jquery 


jClucry selects elements the same way CSS does 

You already know more about jQuery than you realize. The main way you get at 
stuff with j Query is to use selectors — the same selectors you’ve used with CSS. 

If you’re a little fuzzy on CSS selectors, it’s OK. Let’s have a quick refresher. 




This is av\ glgmeyrfc seled-bo\r (aka 
sclcd-fcov-)- I 七 sclcdis all <^f 七 he hi clcmciais 
•m 七 he HTML dodumcy>*t. 



text-align 



This is ^ CSSp^opc^y... 


left; 



… dnd d value -fo\r -the p\ropcv-ty. 


Eadh o( -these 

is a CSS \rulc- 



A CSS 6\ass n A dass sele^p. allots 
^ you bo sclcd*t a 

of clcr 


lcrwCir>*ts- 

: my class { 

position : absolute 




A 叫 D sLays 

s ^ wi*th a hash tteve y/c have Bv\ ID selediov- A CSS 

执扣 ' oir hui^bcir sigh. ^ ID should be used y/b you v/a^t b> 

(sclent oy\c a^d ohly oy\c dement 

#my_id { 

color : # 330 OFF; 
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up your style quotient 


Style, meet script 

The great thing about j Query is that it uses those same CSS selectors we 
use to style our page to manipulate elements on the page. 


CSS selector 


Element Sclcd*fcoV 




hi 


text-align : left 


Class self 匕 "toV" 

•my—class{ 

position : absolute 

} 


IP sclctiov 

細 y—id { 

color : 


#3300FF 


jQucry selector 

j^ u ^y cle^i scl^iov 

^ Method 


( n hl TT ) .hide () 




This hides all o( the hi 
clcmchts oh the pay. 


j^uevy dlass sclcd*tov 




Alcthod 




( TT .my_class n ) . slideUp (); 

^ - Sl'.dies wv all 


lr^o& 

tlass 巧 一山 ss 


j^uc\ry ID sdcd-tx>v 




MrtJiod 


✓ 


( n #my_id TT ) . f adeOut (); 


V -tWis j^ucry statcmc^*t 
-fades ou*t 3^ element 

V^as a CSS IP o-f 叫一 'A 

uyrtil Vt,s invisible- 


CSS selectors select elements to add style 
to tkose elements; jQueiy selectors select 
elements to adxt tekavior to tkose elements. 


Yoi/ll do move W\{}\ domb'm'rn^ 

d 灼 d methods m 2- 

ar\d vest <Jc tiVis book. 
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getting started with jquery 


jClucry selectors at your service 


As its name suggests, jQuery is all about querying. You ask for something with a 
selector, and the JavaScript interpreter asks the DOM to get it for you. If you ask 
for an element with nested elements, j Query will give you the nested elements too. 
Let’s take apart a j Query selector a bit more to make sure we know how it works. 


to example, V/C 
lidve By\ imj element 
bu*t v/c dould just 
as easily put o-tV^cv- 

Sclcd*to\rs dome m -the 
o( s-tv-mgs, so v/c 
have "to use ^uo-tes. 

Wlc use j^uev-y 

*to V^old 

ouv- sclc^*tov-s. 



TWis is st\tcior. TV^c j 
ribrdry was desired *to select 
clcmCK\*b -tV^c same v/ay CSS docs. 


img 


t 


^ u 


u 




CSS sclcd*tov- 


img { 

float : left; 
height : 350px; 
text-align : center; 
border : solid #000 5px 

} 


$( 


t 


) 


t 


( n img n 


0 


O 


Hey, jQuery, can you give 
me (i.e., return) all the img 
elements on the page? 


The U ^uc^ry w fa\rt o( j<$uC\rY 
is dll dbou 七 dsknr^ (oy clci^cir>*ts 
via JavaSdvipi... 



JavaScript 

interpreter 


Hey, DOM, give me 
back all of the img 
elements on the page. 





DOM version 
of the page 


" 3 hd gettihg thcrr» ba 乙 k 

(the \rctu\fh pav-t). 


Youll do mov-c w’rtV) 

C^aptc^r ?oy wv /， 
well jus 七 y/ov-v-y aboiA-t 
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parlez-vous jquery? 


jClucry iw trawslatiow 

To show you just how easy it is to learn jQuery, here’s a little breakdown of a 
few jQuery phrases to use when travelling in DOM country. 


$ ( "button") .click(function() {} 


0 








•••v/hc 灼 -the usev 
dlidks you … … 1 yo^to do 

somc-thmg -Pov- me. 


When a user clicks me, 
ril run all the j Query 
statements within the 
curly braces. 


Click Me! 




心 ㈣ 


Wcy, p (\.c, 

dcrwChts... 


.become mV\s\Wc- 


The text that 
appears between any 
paragraph elements 
will disappear. 


0 


< P > 




$( n #myTop").css({"background-color" : "blue"}); 


O 


jQuer/ 

, 一 W 4 从 " W.M 



W 心；，今 ，工 , 

… to WvaC. 



0 


<div id="myTop": 
</div> 
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getting started with jquery 



BE • !>r •總 
Your job is to play tire browser and circle 
the HTML elements (on the ri^ht) that llie 
jQiiery statement (on the left) will affect. 


jQiiery statement 


HTML elements 


<p>One morning, when Gregor Samsa woke from 
troubled dreams . . .</p> 

<p>he found himself transformed in his bed into 
$( M p M ).hide(); a horrible vermin.</p> 

<p>He lay on his armour-like back, and if he 
lifted his head a little . . . </p> 


<span class= ▼ ，工 talian n >Nel Mezzo del cammin di 
nostra vita</span> 

<span class= n English n >In the middle of this road 
$ ( n span • 工 talian” ） .toggle(); called "our life"</span> 

<span class= ▼ ，工 talian n >mi ritrovai per una selva 
oscura</span> 


$("p#mytext M ).show(); 


<p id= M mytext">One morning, when Gregor Samsa 
woke from troubled dreams ... 

</p> 

<p id= M mytext">he found himself transformed in 
his bed into a horrible vermin.</p> 

<p>He lay on his armour-like back, and if he 
lifted his head a little . . . </p> 
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be the browser solution 


BE ih^ §©|ug©ti 

Your job is to play tire browser and circle 
the HTML elements (on the right) that the 
jQiiery statement (on the left) will affect. 

Here's our solution. 



jQiiery statement 


HTML elements 



$ 



("span. 工 talian") •toggle(); 



<span class= n English，'>In the middle of this road 
called "our life"</span> 



<span class= ， ' 工 talian n >mi ritrovai per una selva 
oscura</span> 


$("p#mytext M ).show(); 



<p>He lay on his armour-like back, and if he 
lifted his head a little . . . </p> 
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getting started with jquery 


tJiereiare no ^ 

Dumb Questi9ns 


So why create jQuery if all 
it does is use JavaScript? Isn’t 
JavaScript enough on its own? 

JavaScript is great for a lot 
of things—especially manipulating 
the DOM—but it’s pretty complex 
stuff. DOM manipulation is by no 
means straightforward at the base 
level, and that’s where jQuery 
comes in. It abstracts away a lot of 
the complexity involved in dealing 
with the DOM, and makes creating 
effects super easy. (It was created 
by John Resig; you can find out 
more about him here: http://ejohn. 
org/about.) 

What’s this business with 
the dollar sign all about? 

It's just a shortcut so you 
don’t have to write "jQuery" over 
and over! But when you're working 
with other client-side languages, 
using j Query () helps avoid 
naming conflicts. 


You’ve mentioned “client- 
side scripting” before, too. 

What’s that again, exactly? 

Web developers often refer to 
the web browser as a client because 
it consumes data from a (web) server. 
A client-side scripting language is 
one that can give directions to the 
browser behind the scenes, while a 
server-side language gives directions 
to the server. Well cover this more in 
Chapters 8 and 9. 

Where did this whole DOM 
thing come from? 

Good question. Web 
developers and designers were 
tired of inconsistencies across 
browsers and decided they needed 
a standard they could use to add 
behavior to and interact with web 
pages on any browser. The World 
Wide Web Consortium (aka W3C) 
worked to define the standard 
collaboratively with these various 
groups. You can find out more about 
that here: http://w3.org/dom. 


When I go to download 
jQuery, there’s a production 
version and a developer version. 
What’s the difference between 
the two? 

The production version is 
minified, which means that a bunch 
of unnecessary characters and 
whitespace have been removed. 

It is optimized to run faster in a 
production environment, but it’s 
kind of harder to see what’s going 
on. The developer version is nicely 
spaced and much more readable. 
It’s intended for anyone who wants 
to dig around in the jQuery code to 
change or even extend it (it is open 
source, after all!). 
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jquery to the rescue 


Your first jftuery gig 


You just landed a job as the new web developer for the Webville Pet Rescue 
Foundation. The marketing team wants to kick off their annual fundraising 
campaign with a revamp of last year’s “Help Our Furry Friends” web page. 
They gave you a screen shot from last year with details on what they want 
the page to do. 



0 


O 


We need to power up last yearns page. Right now, 
the visitor clicks on a button and a picture pops up, but it 
doesiVt stay on the page. We want the picture to appear 
when the user clicks and go away when they click again. 


Josh -Pvorw Ma\rkci'mg 
^o\rc 




/W Wis mailer y / 釙 
VlSUdl 


Also, the 
furry friend picture 
just pops up. Can you make 
it slide slower and sort of 
fade in as it does? 




Well, no one wants to let Marketing down on the first day~you don’t 
want to be on their bad side! So let’s see what we’re working with here". 
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getting started with jquery 


— 4^^irpen your pencil 


Before you figure out how to add jQuery functionality to the page, let’s 
look at how the HTML and CSS are set up. We’ve given you the files for 
last year’s campaign below. Next to the elements that you think you’ll 
need, write what you’ll have to do to provide the functionality that 
Marketing is looking for. We’ve filled in the first one for you. 



a : link img, a : visited img { 
display : none; 

} 

a : hover img, a : active img { 
display : block; 



my—style.css 
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sharpen solution 


i^harpen your pencil 


Before you figure out how to add jQuery functionality to the page, 
let’s look at how the HTML and CSS are set up. We’ve given you 
the files for last year’s campaign below. Next to the elements that 
you think you’ll need, write what you’ll have to do to provide the 
functionality that Marketing is looking for. Here are our answers, but 
don’t worry if yours aren’t exactly the same as what we came up with. 


< ! DOCTYPE htmlxhtml> <head> 

<title>Furry Friends Campaign : j Query 
Proof-of-Concept</title> 

<link rel= M stylesheet" type="text/ 
css" href= M styles/my_style.css"> 

</head> 

<body> 

<div id= M showfriend"> 

^ ~ — - 

<a href="# M >Our Furry Friends Need 

Your Help 

<img src= n images/furry—friend 
</a> 


This has a^d w ad*tive w s*ta*tcs 

sc*t m CS£. The user Kovcrs over l*mk, dhd 
the image appears. 


_ The -furry -friend *the doo^ is nested 'mside 

{ht This imaae should/ 七 show up 

.jpg M > . 

user didks I'mk *m 


</div> 



圍」 


index.html 


a : link img, a : visited img 
display : none; 



a : hover img, a : active img 
display : block; 


This C££ sclcd*to\r dhahjes the display .pv.9P.^V.iy 
.七 h$. 如 4 . 孕 3$. j??. . •V?〆.^9. 丄七:冬 . visible y/heh 

•ih( J.9?(ds. 



text-decoration : none; 
color : #000; 


user hovers her mouse over or dlidks oy \ 
*(^3 ； dements display J>\ropc\rty 

will *bo u blodk. W The ima^e will 

suddenly appear. 


my—style.css 


22 Chapter 1 










































getting started with jquery 


OK, so now we can just dive in 
and start writing jQuery for all 
the functionality we want, right? 


You could, but things might get messy. 

Before we can use j Query to make the cool effects 
that Marketing wants, we need to make sure that 
j Query has everything in place to work its magic. As 
you already know now, one of jQuery 5 s main jobs is 
to manipulate HTML elements, so we need to have 
good structure. To get at elements, j Query uses the 
same selectors that CSS uses, so we also need to have 
well-defined styles. 

Revisit your requirements 

When you’re thinking about your structure, it’s 
always good to go back to what you’re trying to build. 
Marketing wants an image to slide down and fade in 
when people click on the “Show Me the Furry Friend 
of the Day” section of the page. What changes to the 
HTML and CSS might you need to make? 


« o o 


『 Q Furry Friends Campaign 


C Q, 



Let’s make 七 his a dlidkable div. 


make tW«s a dw 侃 starb 
out as W»ddc^. Let's yve \i ^ IP 
O-f 
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get your house in order 


Setup your HTML and CSS files 

Let’s think about what we’ll have to set up in our HTML and CSS files before 
you write any jQuery statements. Open up the jQuery files for Chapter 1 (if you 
haven’t done that yet, be sure to go back to the opening section “How to use this 
book” for details). Find the Begin folder in Chapter 1. Then, add the code in bold 
below to the files, as shown here. 



<!DOCTYPE html> 

<htmlxhead> 

<title>Furry Friends Campaign</title> 

<link rel="stylesheet" type="text/css" href="styles/my_style.css"> 
</head> 

<bodv> 


. 2 .min• js ▼▼: 


<div id= n clickMe n >Show Me the Furry Friend of the 

<div id= n picframe M > r - 

<img src= n images/furry—friend.jpg n > r 
</div> 一 " 

<script src= n scripts/jquery-1.6 
<script> 

$(document)•ready(function(){ 

$( M #clickMe n ).click(function() { 


3 Day</div>^) 


s M X/script> 


v-»cir\di “ay 


}); 

}); 

</script> 

</body> 

</html> 





XWis mdkcs d tlidksblc 

div, 扣 d well style 

i*t ^ CSS -f ile 

below so it 

same look -feel as 

ttcv-c^s -the 
div will slide 

o ^ cy \ -feo show 七 he 
-fu\r\ry -P\ric^d pi&tu\re. 


index.html 


#clickMe 


background : #tf8B36E; 
padding : 2 Opx; 
text-align : center; 
width : 205px; 
display : block; 
border : 2px solid #000 

} 匕 

#picframe 

background : #D 8B36E; 
padding : 2Opx; 
width : 205px; 
display : none; 
border : 2px solid #000 


^ - - 




TVis styles dw so 

七 kb so rb has same look 

a^d -feel as -bKc pd-framc div. 


Sei -the pid-Pvamc sded-tov -fco 
“display: r^o^c^so 七 1 ^七 ’ 1 七 wok / 七 
show when ihc page loads. 


1 


m 


my—style.css 
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getting started with jquery 


jQuery Up Cl^se 


Now that you have your HTML and CSS files set up, let’s break 
down the code that’s sitting between the <script> tags. 





o 




...v/hcr>cvc\r youVc 

'ready av\d loaded... 



...| want 70VA *to do 


(document) .ready(function () 


〆 



The DOM 




Wert S OUV- ID St\tt{jOY (o\ 
"the dlidkMc div. 


( n #clickMe n ).click(function() 





The Aoi separates i\\c sclcd-tov 
fav 七 -fv mC*thod fav* 七 . 


The Code (or what will liappch y/hch the 
button is Passed will go between these 
b^ra^s (aka -the \odt blod w ). 


-the bu*t"fcoK> wi'th ID of 
dlidkAlc "to "the didc cve^-t, -this toAt 
makes 七 he button dlidkable. 


}) 






The sem'idoloy> is 3 |*t 

cy\As ouv- j 夕 u 饮 y dlidk s*ta 七 emwt. 


}) 




o 

o 


scmidoloy> 
tv\ds ouv j<$ucv-y 
veady +ur>d*tio^. 




There are a lot of potentially new terms here. 

We’ll get into events, methods, and functions in a lot 
more detail soon. 


you are here ► 
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put a little glide in your slide 



But our page still 
doesiVt do anything 
new yet! 


You’re right. Our HTML and CSS are 
ready; now we need some jQuery. 

We want the picf rame div to slide and to 
fade. Fortunately, the jQuery folks have built 
effects that let us control both of these rich visual 
actions: slides and fades. We’ve devoted a whole 
chapter later in the book to jQuery effects 
(Chapter 5), so don’t worry about getting every 
little thing down now. Let’s just start sliding and 
fading first. 

Slide on in... 

The first effect we’ll implement is having the 
image slide into view，which is one of the things 


the marketing team manager wants to have 


happen. There are three ways to deal with sliding: 


$( M div M ).slideUp(); 

f^nn 



The sliddXp method 七 he 

p\ropc\rty o( 七 he 
i-t's O, av\d hides 七 he 
element 


$( M div M ).slideDown(); $( M div n ).slideToggle(); 


RO O 

IiPnrn 7 ^ 



TV^c slidePo^m mc*t^od 

fv-opev-by 

o-f elemerrt -fv-om 0 *to 


whatever its sc*t *to m *tV)C 
CSS style. 


TiiC slidclo^lc 3d*t»or\ s 3y s > 1*^ 
•rt’s uf ， slide rt doy/r \； i-f *»Vs 
Ao^iv\, slide i*t uf. 
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getting started with jquery 


May the fade be with you 

We also want the image to gradually appear, going from invisible to fully 
visible. Again, j Query has a method for that, and that method is called a fade. 
The fade methods are pretty similar to what you just saw for sliding: you have 
Fade In, FadeOut, FadeTo, and FadeToggle. For now, let’s just use 
Fade In, which gives us control over the opacity and transparency properties 
of HTML elements. 


wha 七 we -feo -fade m ； 

•m this dasc, i*t is By\ 



("img").fadeln() 



speti-fy i^oy/ -fast »*t -fades m by 
pu 七七 a VdluC inside 

七 Yfeally vcpv-csc^*tcdi m rwillisctor\ds (ms). 







1AA^ 釙 t\t^i fades m, ’it joes 

bem5 mvisiblc (transparcirrt) 
{jo visible (opaque)- 






How many jQuery statements do you think it will take us to accomplish the 
effect we want? 

Take a shot at writing those statements on a piece of scratch paper. If you’re 
not sure, try to write it out first in plain English; then you’ll start getting your 
brain to think in jQuery. 
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hey, that was easy 


That 、 it? 

Amazingly, you only need to write two lines of jQuery code to 
get these effects to work. Now you’re probably beginning to get 
a sense of why so many people like j Query. Add the bolded lines 
below to your index.html file, and you’re good to go. 




index.html 
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getting started with jquery 



Tesr DriVq 


Open the page up in your favorite browser to make sure everything’s working. 



Show Me the Furry Friend of 
the Day 



Cli 匕 k hcv-c. 


❹ O O i ： 


Furry Friends Campaign 




Show Me the Furry Friend of 
the Day 




Yo\av image should 
-fade \y\ artd slide 
down. 



Watch it! 


Check it across multiple browsers. 

Just because jQuery will work the same 
across all browsers doesn’t mean the styles 
you define in your CSS file, or any dynamic 
styles you apply to elements in your page, 
will react the same in all browsers! 


you are here ► 
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canine crusader 


You rescued the Furry Fricwds campaign 

You got the job done with some HTML and CSS fine-tuning, and 
just two lines of jQuery. Just think of all the puppies you’ve saved … 



Were getting a great response 
to the new campaign, too. That 
means more money to help rescue 
more animals. Thanks! 
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getting started with jquery 


j^uerycposs 

T4-，n mr\ 4 - /^\ n*? 如 r\\T" r\ nr\ ^>1 


It’s time to sit back and give your left brain 
something to do. It’s your standard crossword; 
all of the solution words are from this chapter. 



Across 

2. After your browser receives a web page from a web server, it 

loads that web page into its_. 

4. Adds style to a web page. 

6. The language jQuery is written in. 

9. The JavaScript_translates directions you give it into 

different actions on the page. 

11. A CSS setting that makes sure an element won’t show when 

the page loads, display : _. 

12. Name of the character used to separate a jQuery selector 
from a jQuery method. 

13. The name of the symbol we use for the jQuery shortcut. 


Down 

1. A_is used by jQuery to locate and return an 

element from the web page. 

3. This kind of file builds the structure of the web page. 

5. The name of the symbol that ends a jQuery statement. 

6. JavaScript library specialized for complex interactivity and 
rich visual effects. 

7. Use a_to test that yourjQuery scripts are working. 

8. You know you’re dealing with a_when you see a set 

of parentheses after a keyword. 

10. Creator of the jQuery library, John_. 
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jquerycross solution 



jQ^uerycross Solution 
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getting started with jquery 



Your jClucry Toolbox 


You’ve got Chapter 1 under your belt and 
now you’ve added the basic jQuery function ， 
selectors, click events, and the fade effect to 
your toolbox. 


t:: ㈣ ％ 

二，，:一 


Sclc^-to\rs 

J^ u ^y ele^is the 

samc CSS docs ： with 

sclcd-fcovs. 

」 us 七 ^tout dhy kihd of HTML 
clc^ch-t is -Paiv game -fov a 

典 emy sdd 




O^u You've sel^d an j:;: 亡 ; 二 , 

jfadc *rn all Uds elcmc^, 
w to ways ay,d -ovc. 

㈤ 以略 fll 

以二加 … 一 。 ^ 

sta*tewevvt. 


^ou 63^ 
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Grab and go 


jQuery helps you grab web page elements and do all kinds 

of things with them. In this chapter, we’ll dig into jQuery selectors and methods. With 
jQuery selectors, we can grab elements on our page, and with methods we can do 
stuff to those elements. Like a massive book of magic spells, the jQuery library lets us 
change tons of things on the fly. We can make images disappear and reappear out of 
thin air. We can select a certain piece of text and animate the change to its font size. 
So, on with the show — let’s grab some web page elements and go! 


Oh baby, could my 
selectors and methods 


make magic with your 
web page elements... 


this is a new chapter 
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word is getting out 


Jump for Joy needs your help 

You receive an email from your friend, who is a professional portrait 
photographer. She wants to roll out a “Jump for Joy’’ promotion that allows 
users to win deals on a package of prints. She needs your help making the 
promotion work. 


From: Emily 

Subject: Jump for Joy Promotion! 

Hey, 

I saw your tweet that youre doing more interactive web work these d ^/ s ： s ^ 
was hoping you could help me with making some interactive stuff for the Jump 
for Joy 〃 promotion on my website. Td like to give my visitors a chance to receive 
a discount off their purchase before they check out, to encourage them to click 
around the site some more (and hopefully buy more as a result!). 

The page should have four sections with one of four images per section. I need 
a message that says ''Your Discount is» that displays a random discount amount 
(between 5 and 10 percent). When a user clicks on one of the sections, the 
message should appear below the image in that section. If a user clicks agam, Id 
like to get rid of the last message and display a new one. 

I've attached a mockup of how I want it to look. 

Think you can help?? 


Emily 






■ qT 
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What are the project requirements? 


Emily is a great photographer, but her request is kind of all over the place. 
Let’s take a closer look at that email and figure out what she is really asking for. 
Before you can even start writing any jQuery, you want to be super clear on 
what the project (or user) requirements are. 


parpen your pencil 


Take the requests in the email and break them down into a list 
of things our web app needs to do. This list will be our guide for 
ensuring that our web app meets the client’s needs. 


To-Do List: 


2 . 


3. 


4. 


5. 


Converting user requests into actual 
project requirements is an important skill 
that gets better with practice and time. 


Make 


^0 iivfco 

^bry 

i 七 S 七 
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sharpen solution 


%|harpen your pencil 

Solution 


Take the requests in the email and break them down into a list 
of things our web app needs to do. This list will be our guide for 
ensuring that our web app meets the client’s needs. 

Here’s our solution. 


To-Do List: 


The page should have -four scd*tior\s y/i*th oy\C -four -for joy ，； images per sed*tioh. 


2 - The sc^tiohs should be dlidkable- 


3. VJt v\ttd d message 七 says u Y® uV， Disdourrt is” dloh^ wi 七 h a \rdhdioim disdour\*t drmouh*b 
(between 5 ar\d 10 pcv-dch*t). 

4. W\\cy\ a usev didks or\ oy\c sed-tio^s, message should appear below -the irmd^e 

m *tha*t scd*tioh. 

5 . l-f a user dlidks yt vid *thc last message a^d ^ake a new one. 



Great, now that we ve worked out the project 
requirements, let's jump in and get started with 
the jQuery already! 


Whoa! Hold your horses there, hoss! 

Working out project requirements first is a good habit to get 
into for every jQuery project you’ll work on. But before we 
jump right into writing jQuery code, we need to do a little 
work setting up the structure and styles first. We did a bit of 
this in Chapter 1, and now we’ve got even more to set up 
before we get any jQuery goodness going. 
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selectors and methods 


A tag to include the jQuery library, version 1.6.2. 

A <div> tag with the ID of header. 

A <div> tag with the ID of main. 

Inside each of the four div elements inside of the main div, put a different 
image (get the images here: www.thinkjquery.com/chapter02/images.zip). 


Pig iw with divs 

We need four clickable areas on the page, so let’s make those first. The 
most useful and flexible HTML element for our purposes is the <div> tag. 
The <div> tag serves very well in the structure role, since it’s a block-level 
element. We can also easily style div elements to act exactly as we want 
them to. 


Open your favorite text editor to create the HTML and CSS files you'll need. Below is 
the starter code with some key elements missing. Add the following items to the page 
and check them off as you’re done: 



<html> 

<head> 

<title>Jump for Joy</title> 
<link href= M styles/my_style.css 
</head> 

<body> 


rel= M stylesheet M > 


<h2>Jump for 

</div> 

Joy Sale</h2> 


<div><img src 

= M images/j umpl.jpg’ 

’/></div> 

<div> 


</div> 

<div> 


</div> 

<div> 


</div> 

</div> 

<script > </ script> 

</body> 



</html> 


-I3J 

index.html 


div{ 

float : left; 
height : 2 45px; 
text-align:left; 
border : solid #000 3px; 

} 

#header{ 

width: 100%; 
border : Opx; 
height : 50px; 

} 

#main{ 

background-color : grey; 
height : 500px; 



my—style.css 


□ □□□ 
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exercise solution 






PLjiiipH 


Open your favorite text editor and create the HTML and CSS files to solve this exercise. 
Below is the starter code with some key elements missing. Once you’ve added the 
following items, your page should look like our solution. 


V 





A tag to include the jQuery library, version 1.6.2. 

A <div> tag with the ID of header. 

A <div> tag with the ID of main. 

Inside each of the four div elements inside of the main div, put a different 
image. 


Vouv- HTML a^a - 

^•,| C s should look like tWis. 

c 




<html> 

<head> 

<title>Jump for Joy</title> 

Clink href= M styles/my_style.css" rel= M stylesheet M > 
</head> 

<body> 

<div id— w hcadcv-^> 


IP o-f V^cadcv- 


<h2>Jump for Joy Sale</h2> 

</div> A div clc^eni with 

<div id— the It) of 

<div><img src= M images/jumpl. jpg M /x/div> 
<div> s\rd— U im3jcs/jump2- </div> 

<div> S\rd— </div> 

<div> 二、午 ></div> 

</div> 

叶专 . s 义〒 … •. 今 •. 忑 : 

<script > </ script> </body> 

</html> 


Mudc 仏 c 




index.html 


div{ 


float : left; 
height : 245px; 
text-align:left ; 
border : solid #000 3px; 


#header{ 


width: 100%; 
border : Opx; 
height : 50px; 


#main{ 


background-color : grey; 
height : 500px; 




rv^c aw 

clcwcy\-b -fov- 

七 he iways 


my—style.css 
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Tqst DriVQ 


Open the page up in your favorite browser to make sure everything’s working. 
This will give us an opportunity to note how we want the page to function. 


000 

|T7[fT]r|^ -石 


A d w 

clewed 

七^ I 口 
of V^cadcv- 


A div clcmcht with 

the It) of 


Jump for Joy Sale 






We now have four areas on our page with images. 
How do we make them clickable? 
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make it click 


A click event up close 


As we’ve seen, making an element clickable with jQuery is easy. 

Clicking on a page element causes an event to trigger on the page, 
and can also run functions. We’ll get more in depth into events and 
functions later on, but for now, let’s just review how the click event 
works on a paragraph (or <div>) tag. 


TWlS is i\\t clewed v/c 

*to- 


Wc\rc, y/C tell the Js 

i^tc\rp\rctcv that y/c 

-to make fav*a0v~aph 
clcmchts do 
wkh we di 己 k oh them. 





A is d 

toWtd a WW 

of 七 Wmy we Y/avrt do . 


Because i-t s ihside -the 
pairch-thcscs that bclohQ -to _ 

will \tuk> when ihc di 乙 k is 
t^riggcircd by -the usev. 


(▼▼p n ) . click ( function () 




alert ( n You 

乂 ^ — 

Wlc use alev " 七 

s*ta*temer\ 七 >n\\tv\ wc v/a 灼七 
■to *tcs*t *t^a*t ou\r •fuMticm 
was called fv-ofcv-ly. 


rang? ▼▼) 




l/Vfc use opch'mg duv-ly bv-adcs 
■to s-b\rt a % W 0( 

乙 ode. A blotk is a lot like 
a fa\rag\raph ： it 乙 OhtaihS 
elated s-ta-tcmch-b. 


wc pu-t ihio 
七 he quotes will pop u p 
h 3 hev/ wihdow. 




We use dlos'mj duv-ly 
brakes "to tr\d a 
w blo^ o-f dodc. 


^OO 


Q^E)^©0® (^Ll ' file:///Users/rhino/RhinoStuff/HeadFirst/< 

1 I — I file:///Users/rhin.../j4j_s_start.html 「 + j 


Mozilla Fire fox 

[JavaScript Application] 
You rang? 


/j4j_s_start.html 


OK 





42 


Chapter 2 
















selectors and methods 



jQueiy Code Magnets 

Move the magnets to write the code that will make all the div 
elements clickable. When a div is clicked, use a JavaScript alert 
function to display the text "You clicked me." We’ve put a few in 
place for you already. 



function() I 

0 

$ (document) 


ED 



E3 


回 

( 1 I click (~| 



<script> 




I2B 



You clicked me. 
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code magnets solution 



jQueiy Code Magnets Solution 

Move the magnets to write the code that will make all the div 
elements clickable. When a div is clicked, use a JavaScript alert 
function to display the text "You clicked me.” 






<script> 



/Wake suv-c the is 
\rcady -Po\r mtewtioh. 


$(document) 


.ready( 


function() 


]0 


「$ ( n ] I div^j p)^J 1 click (^| I function ()]「{ j 


Make tV>c 


alert 


You clicked me• 


1 ED 


回 


㈣ tr 二 






Close the div d\tk- 
Close "the do 匕 umch 七 \rcady. 


</script> 




Close W 
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selectors and methods 


Add the click method to your page 

Using the code you put together in the magnets solution on the 
previous page, update your HTML file to include this script. Don’t 
forget to put it inside a <script> tag! 



alcV"*t ^alls Uf _ 

3 y/’nr\do …•… bvowsev" 

a message ms'idc it 

use rt Y/V^chcvcv- wc 
y/ar\*t *to sec results o-f 

•bWy y/cvc added -to todt 

|l)cc VdV"ldblcS 3\r\d ^UK\£."tio>r\S. 


<html> 

<head> 

<title>Jump for Joy</title> 

Clink href= M styles/my_style.css" rel= M stylesheet M > 
</head> 

<body> 

<div id= M header M > 

<h2>Jump for Joy Sale</h2> 

</div> 

<div id= M main M > 

<div><img src ； 

<div><img src ； 

<div><img src ； 

<div><img src= 

</div> 

〈script src= M scripts/jquery-1.6.2.min.j s M ></script 〉 


images/jumpl. jpg M /x/div> 
images/jump2 . jpg M /x/div> 
images/j ump3.jpg"/></div> 
images/jump4 . jpg M /x/div> 


<script > 

$(document).ready(function() { 
$( n div n ).click(function() { 

- > alert("You clicked me."); 


Add 栋 esc Imcs ⑼ 

YOUV" "to 

make dWs disable. 


});//end click function 
});//end doc 


</script> 
</body> 
</html> 


r T 


Some pvogvammcvs add 

io help idchti-Py 

p 广 ^ uv .|y b 丄 , 

。… aU 匕。出吒 style 
that、Chtivcly up io y ou . 



index.html 


you are here ► 


45 










test drive 



Tesr DriVq 


Open the page up in your favorite browser to make sure everything’s working. 
You should see the alert message now as you click around the images on the page. 



alert bo% you added- You 
^ see cWcM Uchors ^ovkcd. 


00 




file:///Users/rhi no/RhinoStutt/Head First/C 

file:///Users/rhin.../j4j s start.html I 


Mozilla Firefox 

UavaScript Application] 
You clicked me. 


hOZ 



Yes, but no matter where I click, I get 
the alert message. Why is that? 


Hmmm, that is a problem. 

It looks like we’ve gotten a bit click-happy. 

Let’s take a look at that click event again. 

The JS ih-tcvpirclcv- did e^adily 
what we asked it ■{» do. It 

兄心 d divs … 扣 d added a 祕 ^ ihod ^ 






( M div fl ) . click () 


In fact, you don’t even have to click on the images to get that 
message. Our page structure has div elements nested in another 
div, so when you click on those, the browser thinks you’ve clicked 
on both, and you might get two alerts in that case. Clearly, we 
need to narrow down what we’re asking jQuery to do here... 
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selectors and methods 


fret more specific 

The issue is that we haven’t been specific enough in our selection. So 
how can we get at the four sub-divs and leave out the larger container 
div? Remember from Chapter 1 that jQuery selectors use CSS classes 
and IDs. We can get even more specific about which elements we want 
j Query to grab by adding classes and IDs to those elements. 


Wi do 於’七 d»v *to be 

didkable. 1 七 w»ll be used -fov- IVc cath o-P -these divs -feo 






Would you use just CSS classes or IDs separately, or a 
combination of both, to specify the div elements above? Which 
would work best, and why? 
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head of the class 


Classing up your elements 


In CSS, classes are used to group elements together and give them 
common style attributes. You can have one or more elements on the 
page that have the same class. For jQuery, we can use the same class 
selector, and affect the same group of elements with j Query methods. 
Both CSS and j Query use the “.’’to signify a class, which makes it 
super easy to start classing up your code. 


The VOM hrtt 
s*tv*ud*tu\rc 
七 he v/cb page 




TV^c P_ 七 




Class sclcd*tovs ma-tdh 
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IP-ewtifyiwg elements 

An ID selector is used to identify a single, unique element on a page. In jQuery, as 
in CSS, the # symbol is used to identify an ID selector. IDs are great when you 
want to get specific with an element, or when there is only going to be one of that 
kind of element on the page, like a page header or footer. 

ID sclcd*to\rs ohC 



Check the boxes in the appropriate columns to indicate what you can 
use classes for and what you can use IDs for. Remember, sometimes a 
class and an ID can do the same job! 


Glass ID 

Uniquely Identity a Single element 9n tfce pqge 

Can Iclenti?/ one or more elements Pn the pqge — — 

Can be used hy a single JaVaScrlpt method, cross- 

browser, t9 Identi?/ an element _ _ 

Can be used by CSS tP apply st/le t9 elements 

thwn Pne o{ tfcese can be applied ±o an — — 

element Qt the same 伽 e ~ — 
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who does what solution 






Check the boxes in the appropriate columns to indicate what you can 
use classes for and what you can use IDs for. Remember, sometimes a 
class and an ID can do the same job! 


Glass 


ID 


Uniquely !dent!?y a single element Pn tJie pqge 

Can Identify one or more elements on the pqge 

Can be used hy a single JaVaScript methods crpss- 
krPWser, ±9 Identify an element 

Can be used by CSS t9 apply st/le t9 elements 

thwn pne o{ tfcese can be applied ±9 an 
element Qt the same 伽 e> 


V 


r^r 


D 


thereicir 

)umb 


e no o 

Questi9ns 


What is a block-level element? 

Block-level elements appear within 
their parent elements as rectangular objects 
that do not break across lines. They also 
appear with block margins, width and height 
properties that can be set independently of 
the surrounding elements. 

Why is the 〈 script 〉 tag at the 
bottom of the page before the </body> 
tag? I thought it was always supposed to 
be inside the <head> </head> tags? 


Yes, that used to be (and for some 
people, still is) the suggested best practice. 
However, the problem caused by scripts 
is that they block parallel downloads in 
the browser. Images from different servers 
can be downloaded more than two at a 
time, but once your browser encounters a 
<script> tag, it can no longer download 
multiple items in parallel. Having them at 
the bottom means it will help speed up your 
page load time. 


What’s up with that whole 
JavaScript alert thing? 


The ones we used didn’t look that pretty, 
but alerts are useful for a variety of reasons. 
Really, a JavaScript alert is a simple window 
containing a message. The text inside the 
parentheses is what is shown in the alert 
message. If you want to show a string of text, 
enclose the text in quotes. To display variable 
values, enter the variable name without quotes 
You can also combine variable values and text 
strings by using the + sign. You probably see 
these all the time and don’t think about it, like 
when you don’t fill in a required field in a form. 
In our case, we’re using them more for testing 
and debugging purposes. There are certainly 
more robust ways to do that, and well get into 
those in later chapters in the book. 
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Fireside Chats 



Tonight’s talk ： CSS and jQuery Selectors discuss their differences. 


CSS Selector: 

Howdy, jQuery Selector. I’m relieved that you’re 
here to let everyone know that you owe your entire 
existence to me. 


Well, I’ve definitely got style, but I’ve got quite a bit of 
power. I can change the look and feel of things in the 
blink of an eye. 


And what is it you can do that I can’t do? 


Hello, fancy jargon! What do you mean, you “return” 
elements? 


But I can affect all the elements I select, too. I can 
change all of their background colors to fuchsia if I 
want. And don’t forget that my engine gives you all the 
power you have. 


I’ve got to admit, that does sound pretty cool. 


jQuery Selector: 

Uh, thanks, I guess. I certainly get a lot of my power 
from your approach to picking out elements. However, 
I’m more about behavior than style. You just sit 
around and make things look nice, while I actually get 
some serious action going. 


I won’t argue about your usefulness on a page. You’ve 
got your job, which is changing how elements look, 
and I’ve got mine, which is very different. 

My job is to find elements and return them so that a 
method can do something to the returned set. 


Say someone uses me to select all the paragraph 
elements on the page. I grab that set of paragraphs 
and hold them so that a jQuery method can do 
whatever it wants to them. 


Your selector engine gives me a good chunk of 
power, but another chunk of my power comes from 
JavaScript. Don’t forget the “Query” part of my name. 
I can actually ask the browser for an element, hold on 
to that element, and pass it off to a jQuery method to 
make it fly across the page or even disappear. 


Yeah, and you’re right that I couldn’t do it without you. 
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Wire up your web page 


Glasses and IDs are common ground for the three layers of a web page that 
we looked at in Chapter 1: structure, style, and script. Selectors are where 
those layers get wired together so they can all work in concert. HTML provides 
the building blocks (i.e.，elements and their attributes), or structure of the 
web page. CSS provides the style, or the presentation and position of those 
elements. JavaScript and jQuery provide the script that controls the behavior 
or function of those elements. 

Imagine that we have a class called slideshow for an image we want to run 
the slideUp method on: 

The slideshow dlass is v/ived *to 
七 he dcmcht hc\rc. 

<img class="slideshow" / > 



Structure = HTML 


The s-tyle sheet 
p\rcsch*cs fosi*tiohS 
the slidcshoy/ dlass 
wi 七 h a sclcd*toy. 



Style = CSS 



.slideshow{ 

float : left; 
height : 100; 


Script = jQuery 
(and JavaScript) 


$(".slideshow").slideUp() 


The libvavy, 

sclcd*ts the clcmCh*t jives 
it bchaviov. 
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i^harpen your pencil 


Update the structure, style, and script in your page to make only 
the four image div sections clickable. In the CSS file, create a 
CSS class (called guess_box) and apply it to the html and the 
script. It looks like one of our div elements lost its ID attribute 
too. Can you figure out which one and put it back? 


<html> 

<head> 

<title>Jump for Joy</title> 
<link href="styles/my_style.css 
</head> 

<body> 

<div id= M header"> 

<h2>Jump for Joy Sale</h2> 

</div> 


rel="stylesheet"> 


<div 

<div 

<div 

<div 

<div 


> 


div{ 

float : left; 
height : 245px; 
text-align:left ; 
border : solid #000 3px; 

} 

#header{ 

width: 100%; 
border : Opx; 
height : 50px; 

} 

#main{ 

background-color : grey; 
height : 500px; 


h 的 hi. 午 fps. 


ximg src= M images/jump1.jpg"/></div> 
<img src="images/jump2 . jpg▼’/></div> 
ximg src= M images/jump3.jpg"/></div> 
ximg src= M images/j ump 4.jpg"/></div> 


</div> 

<script src="scripts/jquery-1.6.2.min.j s"></script> 
<script> 

$(document) .ready(function () { 

$(" ").click(function() { 


alert ("You clicked me. 

})； 

})； 

</script> 

</body> 

</html> 




my—style.css 


index.html 
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sharpen solution 


%|harpen your pencil 

Solution 


Add the guess_box class to all the div elements that will be 
used to hide the discount code. Also, update our selector to 
use this class, and add it into our CSS file. And it was the main 
div element that needed to get its ID attribute back. 


<html> 

<head> 

<title>Jump for Joy</title> 

<link href="styles/my_style.css 
</head> 

<body> 

<div id= M header"> 

<h2>Jump for Joy Sale</h2> 

</div> 

I u • w 

id 二 mdm > 

dlass— u jucss_bo>c W ><img src 

ximg src 

u 


rel= M stylesheet"> 


<div 
<div 
<div 
<div 
<div 
</div> 


div{ 

float : left; 
height : 245px; 
text-align:left ; 
border : solid #000 3px; 

} 

#header{ 

width: 100%; 
border : Opx; 
height : 50px; 

} 

#main{ 

background-color : grey; 
height : 500px; 


jucss__bo>c{ 

h 的 hi. 午 fps. 


匕 l3ss^» u ^ugss boy » ，； 


Ximg src: 
ximg src: 


images/j ump1.jpg"/></div> 
images/j ump2.jpg"/></div> 
images/j ump3.jpg"/></div> 
images/j ump 4.jpg"/></div> 



).click(function() 


<script src="scripts/jquery-1.6.2.min.j s"></script> 
<script> 

$(document) .ready(function () { 

$ (" .^ucss^Jbo'/. 

alert ("You clicked me.") 

})； 

})； 

</script> 


my—style.css 

Hcvcs 70 U 

add a tlass U 
^ess Wd 

i\\t ok 

Waoycs m Wes, 
so evevytWmS 1 •… cs 


Attach -the didk method -to 

guess 一 box dlass only and 
^o*t dll div 


</body> 

</html> 



index.html 
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Meanwhile, back to our list 


Let’s have a look at our requirements to-do list to see where we are on 
building everything that Emily asked for: 



The page should have four sections with one of four “jump for joy” 
images per section. 



The sections should be clickable. 


We need a message that says “Your Discount is” along with a 
random discount amount (between 5 and 10 percent). 

When a user clicks on one of the sections, the message should 
appear below the image in that section. 

If a user clicks again, get rid of the last message and make a new one. 



Wow, that was easy. Were almost halfway 
through our list already. The next few things doiVt 
look too bad either. We have to create some text 
and a number. How hard can that be? 


Actually, not very hard. 

There are several things involved in displaying a 
message to the user. Don’t forget, it could be a different 
message for each user who visits the site. 






You’re going to have to create a message 
and store it somewhere to display it to your 
visitors. How do you think you can do that? 
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keeping track of your 


Creating some storage space 


The next requirement on our list is to show some text that will stay the same as 
our script runs: “Your Discount is”. But beside that, we need to hold a number 
that will change or vary depending on the random amount. We need a way to 
carry that information throughout the script — our page needs a way to store 
that information. Storing information (or data) that varies is a perfect job for 
variables. When we want variables in j Query, we use JavaScript variables. 


TV 肅 lc*b 

you AttUrt a variable. 

var 



va\r 

keyv/ov-d, you 
youv variable- 


This is how y/c sci 七 he vdlue o( 
七 he variable \v\ 匕 ode. 


pts = 250; 


W\\tv\ we declare a variable, *tKc 
JavaSdvift *m*tcv-fvc*tcv yves us 
some bv-ov/sev mCrwovy m v/hidh 
v/c da 灼 s*tovc youv db*t3. 



IVe a vaHable so 
that WC CdiY\ 
it latc\r ih ou\r s^vip-t ， 



Now，whenever we want to get the data we stored, 
we just ask for it by its variable name. 


1/Vlc flade a value m*to 
ouv variable us*m^ Bv\ 
equals s ： \(y\. 




n you v/3h*t *to khov/ 

w'ov-c about JavaSdvip*t 

variables ahd -the math 
-fuhdtiohS, pidk up a dopy 
o-f Head Fiv-s*t JavaScript/ 
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Mix things up with concatenation 

For many of our jQuery scripts, we’ll be storing different kinds of data: numbers, 
text, or true or false values. In many cases, especially when we need to display 
different messages to our visitors, we’ll be mixing HTML with these other kinds 
of data, which gives our web pages even more power. So, how do we go about 
combining our variables with other values? We use concatenation . Imagine you 
have a video game where you have a variable called pts that stores the highest 
score, and you need to display it to the winner: 


We need to push together (or concatenate) three 

pieces of information. 



Which give us: 


var msg 


vc-fcv-cir^dm^ a 

W\\tv\ a ov vav-'iablc, use its 

WTML value, >wc use quotes. 广 v/*rtV>ou*t <\uo*tcs. 

"High score : <strong> fT +pts + n </strong>" 


Wc fu*t HTML 

*m*bo variables, bool 



T^c w + w dhav-at*tc\r \th 
you (ov 

*to^c*tKcv) y>umbcvs, 

vav-'iables ； ar>d mudh move- 



We’ll give you the JavaScript code to make a variable called discount that holds a random number 
from 5 to 10. Write the code for a discount—msg variable that shows the message and the 
random variable. Make sure the discount message appears inside a paragraph element. 


var discount = Math.floor((Math.random()^5) + 5); 
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exercise solution 


SplliilpH 


We’ll give you the JavaScript code to make a variable called discount that holds a random number 
from 5 to 10. Write the code for a discount—msg variable that shows the message and the 
random variable. Make sure the discount message appears inside a paragraph element. 

七 y/ov*v*y> v/dl w'S'th 

\rdv>dom -fuy>d*tio^ m Chaf*tev ■ 冬 . 

var discount = Math.floor((Math.random()^5) + 5); 


va\r disdouh*t — i^s^ =■ u <p>You\r Disdouh 七 is u + disdourrt +” ％ </p> 


Meanwhile back m the code. 


Now that you’ve got a variable set up to store your concatenated 
discount message, you just need to update what’s in between your 
<script> tags, so let’s focus there. 



<script> 

$(document).ready(function() { 

$ ( n .guess box") .click( function() 


Cv-ca*tc v\t^N 
Java£tv*ip*t 
variables. 



var discount = Math.floor((Math.random()*5) + 5); 
var discount 一 msg = n <p>Your Discount is ’’+ discount +"%</p> M ; 
alert(discount); 


})； 

})； 

</script> 


Wc pu 七 disdou 灼七 variable 

•m ouv alcv-*t b> rwakc suve *iVs 
do'm^ v/Ka*t v/c …扣七 I 七 *to. 


a 


index.html 
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Insert your message with append 

You’ve got your message ready to go, but how do you display it on the page 
below the image that’s been clicked? If you think of adding a new message 
as inserting it into the page, jQuery provides several ways to insert content 
into an existing element. We’ll cover some more useful ones in more depth 
in Chapter 4, but for now, let’s just look quickly at the append action. 


<p>j Query lets me add stuff onto my web page 
without having to reload it.</p> 




This IS -the J£ mWfircW -to 

append rn quotes *to dll elements- 





( n p TT ) . append ( TT <strong>Like me, for instance . </strong> n ); 


It you \ruh this \y\ youv- sdv-ip-t, -the 
text ih bold oh youv 



T\\t v-csultm^ 
HTML as seen 
•m 七 he POM 


|0 0 O 

I 



j Query lets me 

add stuff onto my web page 

without having' 

to reload it. 

Like me, for instance. 

1 



<p>j Query lets me add stuff onto my web page 
without having to reload it.</p> <strong>Like me, 
for instance.</strong> 




With what you know about selectors already and your new append powers, write the code to 
append the discount variable to your guess—box element. 
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exercise solution 




Adding a new message to a web page is really just this simple! 




OLjiilPH /( u .guess 」 )o%”).app ⑶ d(disdouh 七一 r^); 





tJiereiare no ^ 

Dumb Questi9ns 


Are there any restrictions on what I can 
use for class names? 


How many classes can I give to 
elements? 


A- 

A class name must begin with an underscore 
(_)，a dash (-)，or a letter (a-z), followed by any 
number of dashes, underscores, letters, or numbers 
There is a catch: if the first character is a dash, the 
second character must be a letter or underscore, 
and the name must be at least two characters long. 

Are there any restrictions on what I can 
call variables? 


There is no defined maximum, according to 
the standards, but the number in real-world usage 
is around 2,000 classes per element. 

Is there a way to select every element on 
the page? 

Yes! Simply pass in a _ into the jQuery 
wrapper to get all the elements. 


A- 

厂 L- Yes! Variables cannot begin with numbers. 
Also, they cannot contain any mathematical 
operators (+ * - A /! \), spaces, or punctuation 
marks. They can, however, contain underscores. 
They cannot be named after any JavaScript 
keywords (like window, open, array, 
string, location), and are case sensitive. 


^^,-lf I give my elements a class or ID, without 
any style, will that have any effect on how they 
look in a browser? 


No, there are no browser defaults for classes 
or IDs. Some browsers do treat elements differently, 
but a class or ID without any CSS applied to it will 
not have any effect. 
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TesT DriVq 


Open the page up in your favorite browser to make sure everything’s working. Pay 
special attention to the alert to make sure that the discount variable is set up properly. 


eee ^ II h 

卜 n + 丨 

0 



Jump for Joy Sale 


1 

iC 

美 

j 

\ 

Your Discount is 6% Your Discount is 6% Your Discount is 6% Your Discount is 6% 


someone dlitks, i\\t disdourrt message is added 
•to cvcv-y div i\\t ^ess 一 bo% dlass. 


Everythin works great but... 


The discount variable is generating a random number and appends the message to our page the way 
we expected, but it has an unexpected side effect: the discount shows up over and over again in every div. 


That’s not what we wanted to happen. So what went wrong? 
<script> 

$(document).ready(function() { 

$( n .guess box").click( function() { 



丁 Wis allied c\\eM method 

so membev- *bV^c 

一 bo% dlass is dlidkablc. 


var discount = Math.floor((Math.random()^5) + 5); 


var discount msg = n <p>Your Discount is "+discount+"%</p> n ; 


alert (discount_msg); 令 - - - This is jusi -to 七 es 七 

$ (" . guess_box n ) . append (discount—msg); 七 he variable- 



</script> 




•to yr^\) a dass，but v/e ⑼ duf 

sll *tV^c divs m t\Bss 


We need to append the discount variable only to the individual div that’s clicked. So, how 
do we select only the one that was clicked and append the discount variable to that one? 
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in an ideal world 



Wouldnt it be dreamy if there were a 
simple way to select the div we clicked? 
But I know it's just a fantasy... 
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&ive m 令 (this) owe 


Throughout this chapter, we’ve been looking at jQuery selectors and how 
they return elements that j Query methods use. And very often, we want 
to be really specific about which element we’re selecting. When it comes 
to specificity, the simplest selector to write is $ (this) . (All you have to 
remember is the pronoun “this,” after all.) The $ (this) selector gives us 
an easy way to point to the current element. 


WIc use 

y/vafpev") as bc-fov-c- 


this 



$ (this) 


、丁 W tWis” pronoun 

■bo clcw>cy\*t 

y/o\rkm^ or\. 

Allows us -feo use j^uev-y 

rweihods a-P-Pc^i ihc 

匕 u\rreirrt element 


It’s important to think about $ (this) as context-dependent. In other 
words, $ (this) means different things depending on where or when you 
use it. One of the best places to use it is within a function that runs when 
a j Query method is called: 


ttcv-c s i\\t st\tcbor *to 
ou\r demerit. \ 



Call B j^uev-y method. 


/ Rur\ *tWiS >N^tY\ 

^ method is ddllcd- 


$ ( ▼▼ 細 ylmg n ) . click ( function () 


(this).slideUp()f 


})； 


f[UtSS (#w>y|w>3, 

•m *tw»s dasc) 'ms'ldc ouv- 


6 ee} Bits 


this vs. 令 (this) 


tWtY ave 

.etWs. You 

7 ova sec 


In JavaScript, “this” refers to whatever DOM element we want to work 
with in our code. Adding the $ ( ) to this, giving us $ (this), allows 
us to interact with our DOM element using j Query methods. 
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$(this) is awesome 


Put 纟 (this) to work 

Let’s see if $ (this) can help us solve our problem. Update your 
code to use $ (this), as shown in bold below. 


<script type="text/javascript"> 

$(document).ready(function() { 



Da fills! 


$ ( n .guess box") .click( function() { 


var discount = Math.floor((Math.random()^5) + 5); 

var discount msg = n <p>Your Discount is "+ discount +"%</p> n ; 


alert(discount_msg); 

$ (this) • append (discount—msg); 

- Koy/ v/cVc -tcllrn^ ouv ^ucss 

}) r bo%cs *to aff ⑶ d disdouiat 

}) ; / /end doc ready toAt oy>ly *to oy>c tlitkcd- 

</script> 



Tqst DriVQ 



index.html 


Open the page up in your favorite browser to make sure everything’s working. Pay special attention to the 
alert to make sure that we got the discount variable right. Make sure to click several times to check that 
the random number concatenated into the discount variable works too. 


|eee 



-’a， 


Jump for Joy Sale 
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Great question! 

That leads us right to the last step on our to-do list: 



The page should have four sections with one of four “jump for joy” 
images per section. 

The sections should be clickable. 

We need a message that says “Your Discount is” along with a 
random discount amount (between 5 and 10 percent). 

When a user clicks on one of the sections, the message should 
appear below the image in that section. 


If a user clicks again, get rid of the last message and make a new one. 





How do you think you can remove the last message? 
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presto, chango 


frood riddance with remove 


So how do we get rid of the last message and make a new one? Use the remove method. 
The remove method allows us to take an element, or a group of elements, off of the page. 
Let’s have a look at a really simple page with a list and a button. 



Here’s what it looks like in the browser, and the HTML that creates it. 


browser view 

HTML view 

D 娘 



<div>My To Do List</div> 

C fl © 



<ol> 

My To Do List 



<li>Learn jQuery</li> 

I . Lcam jQucry 

2. Ask the Boss for a raise 

3. Tweet about my raise 



<li>Ask the Boss for a raise</li> 

<li>Tweet about my raise</li> 

</ol> 

: Remove ' 



<button id="btnRemove M > 


And here’s the code for the button, which will remove all 
the list items from your list: 




$( n #btnRemove n ) .click(function() { 
$ ( n li n ) .remove(); 

} )； ^_ 

Looking again at the page in the browser and the HTML — after j Query is 
finished — we can see that all our list items are gone, even in the HTML! 


v-cmovc is 扣 。七 hc\r 


5 f mrthod. TlVmk 
公 ucry method as 
一 i*t’s all dbou*t 
web paje ad*tioir\. 


browser view 


HTML view 


o o o / 石 

+ + G? ft © 

My To Do List 

Remove 


<div>My To Do List</div> 

<ol> 

</ol> 

<button id= M btnRemove"> 

— 





Which selector do you need to use to remove 
just the discount message from the page? 
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Pig down with descendant selectors 

Descendant selectors are yet another selector we can use with jQuery, and they 
happen to fit our situation perfectly. With descendant selectors, we can specify 
relationships between elements. We can select children, parents, or siblings. 



T\\t sclcd*tov- ov\ 

Ic-ft IS 

$ ( ff div p H ) 


Leave a spate 
between ^av"Cir\*t 

乙 Wild y\amc- 



Hcv-c^s Koy/ Vou sclcdt 


T\\t sclc^*tov- OY\ *tV)C 
is *tV^c ^Wild- 


: s \\o^i y 

■tV^c c.Wild o\ a cM\\A 

( n div div p ff ) 



"This \rctu\rhS dll div dcrwCh*ts that 
dhild\rCh o( a div dcrwCht- 


( TT div div n ) 




W\)tv\ you dombme daiss a^d ID sdc^-tovs 
v/ith dcs^chdoih-t sdc^-tov-s, you really 
9 c "t spc^i-Pi^ wovks oy\ B 

Complex HTML page. 


( TT div p#my blurb ”） 




^v»abs dll clcinftC^'ts 七 ha 七 
are ^ildv-cr^ o-f i\\t 乩 ildv * ⑼ 

o^c a dw clcw>c^*b 




( fT div p 


( n div div img(Would *tV^se loe 

jv-ay\di—dWs *tncir\f / 


^vdbs dll Y 

av-c dW»ldv-cir\ <^f a 

div elemerrb 



^jiarpen your pencil 


Write the statement that will remove the last paragraph in the Jump for Joy 
DOM using a descendant selector. 
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sharpen solution 


i^harpen your pencil 


Start by using the . guess_box class selector, followed by 
a descendant p selector to access the paragraph you added. 
Then, use the remove method to take all the p elements in any 
element with the class of guess box off the page. 


jC\a^css^_\)o% p W ).\removcO ； 



div id="main' 


div id= n header^ 


1 I"""div class: 1 

div class: div class: j 

div class= 

\ ^h2 i ” guess -m 」 

"guess box" II ” guess 一 box” 1 

"guess box" 


lmg 


3 usc\r dli^ks -this 
you append the 
fav-agv-aph -fco it. 



I*f a usc\r dluiks a sedo^d ti% you remove 
the bs 七 pairagiraph you aiiac,\\cd, av\d 
append a hew pav-agv-aph. 



So now I can append and 
remove pieces as I see fit. Does it 
matter when or where I do that? 


Yes, the order in which you add or 
remove your elements is important. 

You can’t remove an element before you add it, 
and there’s no point removing an element just 
after you add it, right? 
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selectors and methods 


— i^^irpen your pencil 


Your job is to decide where the remove statement should go. Write the 
statement on the line numbered 1,2, or 3 below. Then explain why you 
put it there. Think about when you need to remove the paragraph, and 
use the process of elimination to pick the correct place to do that. 


<script> 

$(document).ready(function() { 


$(".guess_box") .click( function () { 

2 . 


var discount = Math.floor((Math.random()^5) + 5); 

var discount—msg = n <p>Your Discount is ’▼+ discount + n %</p> n ; 

alert(discount_msg); 

$ (this)• append (discount msg); 


3 ... 

}); 

}); 

</script> 


index.html 


Why I think the statement goes there: 
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sharpen solution 


i^arpen your pencil 


Your job is to decide where the remove statement should go. Write the 
statement on the line numbered 1,2, or 3 below. Then explain why you 
put it there. Think about when you need to remove the paragraph, and 
use the process of elimination to pick the correct place to do that. 


<script> 

$(document).ready(function() 


$( n .guess—box")•click( function() 

2 f(' ， uess_bo% p W ).\rcnaovcO ； 


var discount = Math.floor((Math.random()^5) + 5); 

var discount—msg = "<p>Your Discount is ’▼+ discount +"%</p>' 

alert(discount_msg); 

$ (this)• append (discount msg); 


3 . 


}); 
}); 

</script> 


Why I think the statement goes there: 


aJ 


index.html 


The remove s*ta*tcmch*t 30 oh lme I because i*t y/ould be ou ■tsidc dlidk 

-fuhd*tioh -for ^ucss box.. The s*ta*tcmch*t oy \ Imc because would 

remove wha*t I just a 代 ehded. I wa^-t bo remove 七 he las 七 disdourrt message bc-fovc 

a hew Ohc, so 111 pu*t i*t as -the -firs-t I'mc CoAt blodk (inside 

durly bvadcs) -for {ht guess_b 。乂 didk. 



The order and timing of when you make your jQuery 
calls is important. 

This is true especially when you are giving important information 
to your visitors and removing it again. We’ll look more into the 
timing and order of on-screen effects in Chapter 5. 
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Sometimes, after calling the remove method, I still 
see the elements I removed in the source of the page. Why 
is that? 

A- 

厂 L- Oftentimes, browsers actually make a fresh call to the 
server to get the source of the page when you use the View 
Source option. Using DOM inspectors, like Chrome Developer 
tools or Firebug for Firefox, should show you the DOM as it is 
displayed on the page. 

What do the Math. floor and Math. random 
methods mean? 

A- 

The floor method rounds a number down to the 
nearest integer and returns the result. The random method 
returns a random number between 0 and 1. When we multiply 
it by a number, we guarantee getting a number between 0 and 
whatever number we multiply by. 

Where did this come from? 

In many object-oriented programming languages, this 
(or self) is a keyword that can be used in instance methods 
to refer to the object on which the currently executing method 
has been invoked. 

^^:So I can display a random discount only when 
someone clicks one of the images, and remove it when he 
clicks another one. But really, that’s not all we need to do 
to make this work for real, right? 

You’re right, you’ve got us there. This is only the first 
piece of the puzzle, really. People are going to need to have 
that code carry over when they check out to buy their photos. 
To pass the discount code to a shopping cart, you’ll need to 
send the code back to the server for processing. We'll work on 
that kind of functionality in more detail in Chapters 8-10. 


test drive 



Tesr DriVq 


Add the line of code you just wrote to your index.html file. Then, open the page up 
in your favorite browser to make sure everything’s working. Click several times to 
check that the random number concatenated into the discount variable works 
too, and that the old discount values are removed properly, before appending the 
new code. 


0OO 



Jump for Joy Sale 
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selectors and methods 


Your turw to jump for joy 


Congratulations! You nailed the requirements and made the campaign work. 



The page should have four sections with one of four “jump for joy 
images per section. 




The sections should be clickable. 


We need a message that says “Your Discount is” along with a 
random discount amount (between 5 and 10 percent). 

When a user clicks on one of the sections, the message should 
appear below the image in that section. 

If a user clicks again, get rid of the last message and make a new one. 


From: Emily 

Subject: Re: Jump for Joy Promotion! 

Thank you so much for doing this for me. My site is so much better. 
I hope people enjoy my photos as much as I enjoy my new page! 


Emily 


> ps. r ve attached a self-portrait of me with my photo gear when I saw the 
web page... No prizes for guessing what I’m doing! 


new 
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your jquery toolbox 



Your jftuGry Toolbox 


You've got Chapter 2 under your belt 
and now you've added the basics of 
jQuery selectors and jQuery methods to 
your toolbox. 


S 


• ( 七 WlS) 

•s 騎如 ’ 一 at 

TV,e = 

細 — 7 雜 滅 
0 , 诎⑽ vU " cWcd， 



j6^ucv*y mc^ods 

method — A method is 

reusable toAt deemed m jquery 
liWav-y. Y® u uSC 州 c*thods *to do 

stu« m jquery a^d *m JavaSd\ri^*t- 
TWrnk of a method as a vcvb - vt’s 
all about >wcb fay ati\o^ 

.a^c^d — UsevU s^edi-fied 
6o^*tc^*t i^*bo *tv>c P ⑽ . I 七 3 士 
dddied *to "tV^c c^d o-f >/Ka*tcvcv 

clcmC 灼七 63lU »*t* 

.vemove — Takes elements ou-t <^f 

如则 . 


Selcrio" 

f(-this) — Seijis i\\t C\ArrCY\i clcmcir»-t. 

f( w div w ) — Selects all -the div elements ov\ 
-tlic pay. 

f( w div — Seijis all -the p clcmch-ts 
-that av*c divc^tly msidc div elements. 

"'州丫一乙 lass ”） 一 Selects all *tl^C clcrwChts 
y/i*th *tliC my^jC.l3ss ddss. 

fV'dW.rr^/ 一 dass ”） 一 Selects o^ly ilic divs 
七 ha 七 have -the my_dlass dass. ①说…七 
*ty^CS of clci^Cir4"ts d-3ir» sli3VC 3 tUss.) 

{( 认养叫一 ^) 一 Selects -tlic clcrwcir»-t 七 ha 七 

lias -tlic IP o( I 



i mdvs 
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jQuery makes it easy to add action and 
interactivity to any web page, in this chapter, we 11 

look at making your page react when people interact with it. 
Making your code run in response to user actions takes your 
website to a whole new level. We’ll also look at building reusable 
functions so you can write the code once and use it multiple times. 


Making things happen ^ 

your page 




this is a new chapter 





counting the beans 


Your jClucry skillz are m demand again 

Emily was pleased with the work you did for her Jump for Joy 
promotion, but she’s met with her accountant and now has a few 
changes she’d like you to make. 


From: Jump for Joy 

Subject: RE: Jump for Joy Promotion 

Hey, 

You did a great job of making the web promotion work! I met with my accountant 
and crunched some numbers on the success of the promotion. 

My accountant suggested some changes to the app that should bring in more sales. 

Visitors should still get four options to pick from for the chance toreceivea 
discount. However, now lefs make it the same discount amount each time. My 
accountant recommends offering 20% off visitors* purchases before they check 

out. That should be more enticing for them. 

Visitors should only get one chance to find the discount code, which should be in a 
random square for each visit. If a visitor finds the discount code when she dicks, 
show it to her on the screen before she proceeds. Otherwise, show her the box 

where the code was hiding. 

Think you can do this as well as you did the first part? 


Emily Saunders 
jumpforjoyphotos.hg 


Emily’s takch some pho-tos o-f 

-fo\r his flro-filc, but she 
^ouldh "i \\\\m -(jo Jump -pov joy. 

Cah y ou<r -to the site help? 


k 

\ 
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jquery events and functions 


The money man has a point... 

Making the promotion limited to only one square keeps Emily from having 
to hand out so many discount codes, and it keeps people clicking around 
the site. Seems like these new features are all about clicking … 



It’s time for another list of requirements. You know what to do: look at 
Emily’s email again and pick out all the new features she’s asking for. 
Write out in plain English what you think each feature is. 

Requirements: 


— 4^^irpen your pencil 
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sharpen solution\ 


lharpen your pencil 

Solution 


Requirements: 


It’s time for another list of requirements. You know what to do: look at 
Emily’s email again and pick out all the new features she’s asking for. 

Write out in plain English what you think each feature is. Here’s our solution. 


參 The disdour\*t should or\ly be oy\c of -four boxes, -the 

images should be m a diHererrt (v-a^dor^) box. eadh loads. 


參 \/isi*bov- 
Y\ttd 


rs should ohly yt oy\c bo -fmd *the disdourrt *they load *the pay. 

七 。 stop -from more 七 1^ 竹 or^tt m order *to -f'md d better disdoui 


So well 
be*t*tcv- disdourrt. 


• A-Ptcv- the visitor has made his ^ucss dhd dlidked oy\ 3 bo%, *bhe a^sy/ev- should be vevedled as 
*to y/Krthcv- or ho*t he ^o*t i*t l-f he C\\ost dovredtly, show him *the disdouh*t so he ddh 

apply i*t *to his order. 

參 There will be a s-b^hdard ZO% disdourrt, ms*tcad a variable o^e. So mstcad of a 
pcrdchia^c, ^ivc visitors a disdouht dodc. 




You know how to add a click to your page. But how do you make sure a user 
can only do it once? 

You also learned in the previous chapters how to run code when a click gets called. 
Can you think of a way we could use that to help us complete our solution? 
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jquery events and functions 


Making your page evewtful 


The Jump for Joy application is all about the clicks. In j Query and 
JavaScript, a click is referred to as an event (there are plenty of other 
events, but for our purposes, we’ll just focus on clicks for now). An event 
is a mechanism that allows you to run a piece of code when something 
happens on the page (like a user clicking a button). The code that gets 
run is a function, and functions allow you to make your j Query more 
efficient and reusable. We’ll look more closely at functions in a minute, 
but for now, let’s look at how a click event really works. 

cxtva step hcv-c that 


A 匕 lidk cvch-t h 


you didh t see ih Chap-tcv /. 




eee 




l ^ 



The CVClr>*t lis*tcir>cv* V>C3V-S 

air>d passes *i*t OY\ *to … 


…七 he JavaSdv’ip 七 m-tev-fve-tev, 

Vfii'idV) v/oV*ks ou*t ir>ccds *to 

haff ⑶ -fov cadii cvcy>*t... 


HTML UtW 



Good question. 

Event listeners are a part of the 
Document Object Model (DOM). 
You can add them to any page, so 
you don’t have to rely on users 
clicking links and buttons to make 
things happen. Let’s take a closer 
look. 
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lights, camera, events 


behind the scenes of m evewt listener 


Event listeners are the browser’s way of paying attention to what a 
person does on a page, and then telling the JavaScript interpreter if 
it needs to do something or not. 

jQuery gives us very easy ways to add event listeners to any element 
on the page, so users are no longer just clicking on links and 
buttons! _ 

clcrwCht with the - ^ $ ( n #showMessage") .click (function () 

ID shov/Mcssagc. 


alert('You Clicked Me !')； 


})； 


Add 3 didk cvcht 


Ruh this dodc. 



Q An element is clicked 


回 


[j /iinkjquery.com/jqplay/.. 

< - 1 c fi <\\ 


EJ 


Click Me! 


Click! 


^ The page at thinlgqyery.com says: 


You Clicked Me! 


t . % 

OK 


V~~■ —— ■ - 


J 



The visitor sees something 
happen on the page. 



AVhat you see in the browser 




Behind 
the Scenes 



❺ 


❻ The event listener attached to the 
element “hears" the click event and 
tells the JavaScript interpreter 
what code is attached to it. 


The JavaScript interpreter 
runs the function specified in 
the event listener. 

，—-- 

I need to 
display an alert! 


> I heard k 

Q 。 




Event listener 



JavaScript 

interpreter 
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jquery events and functions 


Pmdmg an event 

When we add an event to an element, we call this binding an event to that 
element. When we do this, the event listener knows to tell the JavaScript 
interpreter what function to call. 

There are two ways of binding events to elements. 


Method 1 

We use this method to add events to elements as the 
page is getting loaded. 

This is often known as the convenience method. 


$( M #myElement M ) .click( function () { 

alert ($ (this) . text () ) 

})； 

Method t 

We use this method just like Method 1, but we 
can also use it to add events to elements that 
get added to the page after it is loaded, like 
when we create new DOM elements. 

$( n #myElement M ) .bind ( 1 click 1 , function () 
alert ($(this) .text()); 


Both methods add a didk 
listchClr -Po\r ouv- dcrwCht 
"the IP o-p myBlcrwCh't. 





Method 1 — the convenience method — is simply a shortcut for 
Method 2 , but only when the DOM elements exist already. 

jQuery offers many shortcuts like this to help you keep your code cleaner. 
They are known as convenience methods because they are included solely 
for ease of use — but they do have limits. You’ll want to use Method 2 to add 
events to new DOM elements that you create within your code, like if you added a new 
clickable image, or a new item to a list that you want the user to interact with. 
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getting trigger-happy 


Triggering events 

Events can be triggered by a wide variety of things on any 
given page. In fact, your entire browser is eventful, and 
pretty much any part of it can trigger events! 


click 

mousedown 

mouseout 

toggle 

dblclick 

mouseenter 

mouseover 

-Cr- —— 

focusin 

mouseleave 

mouseup 


focusout 

mousemove 

r 


hover 







error 

resize 





Browser 

events 
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jquery events and functions 


Event is triggered 



Rim a function 





JavaScript 

interpreter 


function () { 

[this is the code 
block, do stuff here] 

} 


Event listener 



Selector + Event + Function = Complex interaction 



tWeiOre no o 

Dumb Qu©sti9ns 


What about those functions 
inside the events? 

They are called handler functions. 
A handler function is a block of code 
that runs when the event is triggered. 
We’ll see more on functions later in 
this chapter. 

Where can I find all the 
different types of events? 

On thejquery.com website, under 
Documentation -► Events. 

How many different categories 
of events are there? 

jQuery groups events into five 
different categories: browser events, 
document loading events, form events, 
keyboard events, and mouse events. 


How many different events 
are there? 

There are nearly 30 different 
types, between all the different event 
categories. 

What can trigger an event (i.e., 
make an event happen) on the page? 

It's mostly input devices (keyboard 
and mouse) that trigger the different 
event types. However, your browser, the 
page document, your jQuery code, and 
even an HTML form on your page can 
trigger events, too. 
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the event exposed 



The Bvent Bxposedi 


This week's interview: 

What’s so special about events? 


Head First: Hi, Event, it’s nice to be able to talk 
to you. 

Event： It’s great to be here. 

Head First: So, who are you? Who’s the real 
Event? 

Event： These days, I’ve really come into my 
own, but before jQuery came along, I was a little 
scattered. I’m an object that helps people interact 
with a web page. 

HeadFirst： That sounds cool. I’ll come back to 
that in a bit, but why were you scattered? Where 
did you come from? 

Event： It’s a long story. Back in the mid 1990s, 
Netscape released Navigator 2.0. It was great. I 
was a really simple model. The DOM, JavaScript, 
and I were the new kids on the block. There was 
a W3C standard on how we were supposed to be 
implemented in browsers and everything! 

HeadFirst: That was a long time ago. You’ve 
come a long way. 

Event： Yes, we all have. Along the way, we got 
caught up on the browser wars between Microsoft 
Internet Explorer and Netscape. Eventually, 
Microsoft won out, after both companies tried 
to one-up each other with cool tricks that were 
not in the standard, but only supported in each 
company’s browser. 

HeadFirst： That sounds like a tough time. 

Event： It was, but good things came out of it. 

In 1997, both Netscape and Microsoft released 
version 4.0 of their respective browsers. There were 
many new events, and we could do so much more 
with the page. It was a great time to be an event. 


HeadFirst： So what happened? 

Event： Things got out of control. Netscape went 
open source, and later became Mozilla Firefox. 

But there was still a Netscape too, for a while. 

Both it and Internet Explorer had different event 
models. Many things would only work on one 
browser, leaving people frustrated when they got 
to a website with the wrong browser. Netscape 
eventually went away, but several other browsers 
came on the scene. 

HeadFirst： So why are things so great now? 

Event： Browser by browser, things are still not 
ideal. Internet Explorer supports different events 
than Firefox, Google Chrome, Apple’s Safari, and 
Opera. But that is changing with each release. 
They are starting to get more in line with the 
standards. But the really great news is that j Query 
handles these issues for the web developer. 

HeadFirst： Really? That’s great! How? What’s 
this object you said you were? 

Event： j Query knows which browser is being 
used, so it decides how to deal with events, 
depending on what browsers your website viewer 
is using. As for an object, it’s nothing fancy. In 
practical terms, an object is really just variables 
and functions combined into a single structure. 

HeadFirst： Where can we go to read more about 
these variables and functions? 

Event： You can find out more about me in 

j Query’s official documentation here: 

http:/ / api.jquery.com/category / events / event-object/. 

HeadFirst： Thanks! I’ll be sure to check that out. 
How do we go about using you on our pages? 
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Event： Well, first, I have to be bound to 
something, so the event listener knows to listen out 
for me. Then, something has to trigger me, so I 
can run whatever code I’m supposed to when an 
event happens. 

Head First: OK, but how do you know what code 
to run? 

Event： That happens when I get bound to an 
element. Pretty much any code can get called 
when I get bound to an element. That’s what 
makes me so useful. I can also be unbound from 
an element. If that happens, the event listener will 
no longer listen out for events on that element, so 
whatever code was supposed to run when I was 
triggered won’t run. 


Head First: That sounds pretty slick, but we’re 
running out of time. Where can I find out more 
about you and the types of events that happen on 
the page? 

Event： The link I gave you already will explain 
what makes me an object. There’s more 
information about me and all the types of events 
on the jQuery website, in the Documentation 
section. Thanks for having me. 

Head First: Thanks for being here. We’re looking 
forward to using you in our code. 



We’ll dive into functions and 
variables later in this chapter. 

Plus, we’ll look more at JavaScript in 
coming chapters. 
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that’s pretty uneventful 


Removing m evcwt 

Just like binding events to elements, you often need to remove events from 
elements — for example, when you don’t want people to click a submit button 
twice on a form, or you only want to allow them to do something once on a 
page. That’s just what you need for these new Jump for Joy requirements. 

After an element has an event bound to it, we can remove that event from 
the element so it doesn’t get triggered. 

To remove om event: 


The unbind command tells the web browser to no longer listen for 
this particular event for this element. 


*tWis Code 
jc*ts d’ 化 ked. 


$( M #myElement n ).bind ('click', 
alert($(this).text()); 



Add 3 didk everrt lis-tcr>cv- -to 
"the v/i-th 3v) ID of 




function () { 


})； 

$( n #myElement M ).unbind('click'); 




Remove 
•IrVowT 日 灼七 1 


To remove all events: 

$ ( n #myElement▼▼) .bind 
alert( n I've got 


/\dd d -fodus cvcir^-t ristc^cv- 

{jo demerit ^ IP 


( 1 focus 1 r function () { 

focus"); 


})； 

$( n #myElement n ).click(function(){ 



Add a cvcht listchCV- 
■fco ilie element with ay\ |P 

of 



alert ( 1 You clicked me. 1 )； 


$( n #myElement n ) 


.unbind() 


Tell bv-oY/scv -to m 
lo^JCV" *fo\r cvcr\*ts 
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So, an event listener sits inside the browser, 
attached to elements, waiting for events to 
happen, and tells the JavaScript interpreter to do 
something when they do happen, right? 




Yes! That's exactly right. 

Let’s see how events can help us tackle the first requirement. 






let usc^rs V^avc br^f 

a 七 disdou\r\t 


〜 parpen your pencil 


Using what you know about $ (this) and what you learned about 
events, update the code from the last chapter and add in the code to 
remove the click event from the div sections. 


$(".guess_box").click( function() { 

$(".guess—box p").remove(); 

var my—num = Math.floor((Math.random ()*5) + 5) ; 

var discount = "<p>Your Discount is n +my_num+ n %</p> n ; 

$(this).append(discount); 


-I 

index.html 
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sharpen solution 


%|harpen your pencil 

Solution 


Using what you know about $ (this) and what you learned about 
events, update the code from the last chapter and add in the code 
to remove the click event from the div sections. 


(".guess_box").click( function() { 

$(".guess_box p M ).remove(); 

var my—num = Math.floor((Math.random()*5) + 5); 
var discount = M <p>Your Discount is n +my_num+ n %</p>' 
$ (this) .append(discount); 

Tell bv-oy/sev" *to v\o 


-for events -fv-om 

乙 uvrerrt element 


})； 



index.html 



Tesr DriVq 


Update your index.html file with this new code, save it, and click around to 
make sure everything is working as it should. 
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jquery events and functions 


|0 0O 



叫 M + A 


麯 


Jump for Joy Sale 



You’re right, it’s not removing the 
click from all the events yet. 

This only removes the click from whatever box you 
click on. You could still click on the other boxes. If 
only you could stop the click happening on each of 
the other elements... 





How would you remove the click 
event from every box after the visitor 
clicks one box? Do you have to go 
through the elements one by one? 
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hey, do that again! 


&omg through theelements 

Oftentimes, we need to interact with a group of elements one by one. 


Thankfully j Query gives us the ability to loop through groups of 
elements, based on whatever selector we choose. Looping, also 
known as iteration, is simply going through a group of elements one 
at a time, and doing something to each element along the way. 


Loof tWou# tacM elements 

ouv- 




\ 




Ruh "this hdhdl 饮 

-Puh^ioh. 


$ (” .nav item”）.each (function() 


$ (this) .hide() 


}) 


Run -tKis todt oy\ tac\\ 
ouv- sclc^-tov-. 



Uc tacM rtcra-tov takes a yro^ 
av\d dots somrtWg *to 

cvev-y element *m i\\t jv-ouf *m 


you’ll see more of me from here on out, 
especially in the next chapter... 


IVc II look at i-tev-atioh ih 
depth latcv- m the book. 


90 Chapter 3 


rwo\rc 





















jquery events and functions 



Dumb Quest? 


9ns 


Can I trigger events in my code? 


Yes! This is relatively common. Good examples of this are 
submitting forms for validation or hiding modal pop-up boxes, to 
name a couple. 


So, how do I trigger an event then? 


Just like most things in jQuery, its creators tried to make 
things memorable. You can just use the .trigger method, 
combined with a selector; for example, $ ( "button: first"). 


trigger('click*) ; or $("form"). 


trigger('submit');. 


Can I use events in a web page without jQuery? 


Yes, you can. jQuery just makes it much easier to bind events 
to any element because it’s cross-browser compatible and uses 
easy-to-use functions to help bind the events to elements. 


How does . each work? 

. each uses the selector that calls it and creates an array 
of elements identified by that selector. It then loops through each 
element in the array sequentially. Don’t worry, though, we’ll explain 
arrays and loops a little later on! 

So, I’ve seen that I can create elements with jQuery, after 
the page is loaded. Can these elements also get events? 

Yes, they can. After an element gets created, you can still use 
the . bind method to give it an event listener. Also, if you know 
ahead of time that your element will behave like some other elements 
already created, you can use the . live method. This will attach a 
handler to the event for all elements that match the current selector, 
now and in the future. This will work even for elements that have not 
yet been added to the DOM. 


— 4^^irpen your pencil 


Write the code to use iteration to remove the click event from 
every clickable box on your Jump for Joy page. Also, read your code 
carefully to see if there are any pieces you don’t need anymore. 


$(".guess_box").click( function() { 

$(".guess_box p")•remove(); 

var my—num = Math.floor((Math.random()*5) + 5); 

var discount = "<p>Your Discount is "+my_num+ n % </p>"; 

$(this) .append(discount); 


$ (this) .unbind( ' click'); 



index.html 
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sharpen solution 


m 


多 |harpen your pencil 

Solution 


v-cwovc tv>c old or>c. 


Calling the . each method on the . guess_box class loops 
through all of the elements with that class. You can then unbind 
the click method from each one of them in turn. You also no 
longer need our . remove code; since visitors can only click once, 
there won’t be anything to remove anymore. 


(".guess_box").click( function(){ 

― $■ ( " . guess box p" ) . remnyp ()； 
var my_num = Math.floor((Math.random()*5) + 5); 
var discount = "<p>Your Discount is "+my num+"%</p>' 


$ (this) .append(discount); 


$( n .guess_box n ).each( function(){ 
$(this).unbind('click'); 

})； 


bo% 




}); 



index.html 
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jquery events and functions 



Can we just set up a 
separate script file from our 
HTML? We already do it with 
our CSS... 


Good thinking. In fact, there are several reasons 
to create a separate file for your jQuery code: 

o You can include it in more than one page (code reuse). 

❺ Your page will load faster. 

❺ The HTML code you write will be cleaner and easier to read. 



You already know how to include CSS files, and you’ve seen how to include the jQuery library. 
Including your own JavaScript/jQuery file is no different! 


You should already have a folder called scripts in your root web directory (where you put the 
jQuery library). 

o Using your favorite text editor, create a file called my_scripts.js and save it 
in the scripts folder. 

Take all the JavaScript and jQuery code from our index.html file and move it 
into this new file. There is no need to put the 〈 script 〉 and 〈 /script 〉 
tags in the new file. 



Create the link to this file in your HTML page by putting the following code 
just before the closing </body> tag: 

<script src= M scripts/my_scripts.j s n ></script> 
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exercise solution 



fufl 鉍 


I 

PI 


OLjitlpH 


You already know how to include CSS files, and you’ve seen how to include the jQuery library. 
Including your own JavaScript/jQuery file is no different! 



Using your favorite text editor, create a file called my_scripts.js and save it 
in the scripts folder. 



Take all the JavaScript and jQuery code from our index.html file and move it 
into this new file. There is no need to put the 〈 script 〉 and 〈 /script 〉 
tags in the new file. 


$(document) .ready(function () { 

$(’▼• guess—box" )• click ( function () { 

var my—num = Math.floor((Math.random ()^5) + 5); 

var discount = n <p>Your Discount is f, +my_num+ n %</p>"; 

$ (this) .append(discount); 


$(".guess—box") •each ( function() { 
$(this) .unbind('click'); 

})； 

}); 

})； 


c •脉咖叫 

忠磁娜二 



my_scripts.js 


94 Chapter 3 












jquery events and functions 



Create the link to this file in your HTML page by putting the following code 
just before the closing </body> tag. 


<!DOCTYPE html> 

<html> 

<head> 

<title>Jump for Joy</title> 

<link href= n styles/styles.css" rel= M stylesheet n > 

</head> 

<body> 

<div id= M header"> 

<h2>Jump for Joy Sale</h2> 

</div> 

<div id= M main "> 

<div c 1 ass= M guess box n Ximg src= M images/ jumpl. jpg"/></div> 
<div c 1 ass = M guess box"Ximg src= M images/ jump2 . jpg"/></div> 
<div c 1 ass = M guess box n Ximg src= M images/ jump3 . jpg"/></div> 
<div c 1 ass= M guess box n Ximg src= n images/jump4 • jpg’ ， /></div> 
</div> 

<script src= n scripts/j query.1.6.2.min.j s"></script> 

<script src= n scripts/my 一 scripts • js"X/script> 



</body> 


<html> 


index.html 


All right, thafs 
more like it. Nice and 
organized. Move along 
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ahhh, that’s much better 


Your project structure 

You just made some important changes to 
how your files are structured. Let’s look at 
how these all fit together. We’ve added several 
things since the last time we looked at it. 




jumpl.jpg 



jump2.jpg 



jump3.jpg 



jump4.jpg 



jquery-1.6.2.min.js 



my—scripts.js 



my—style.css 



Dumb Questi9ns 

Why does this file have a 
■js extension? 

Because jQuery is a 
JavaScript library, any code we write 
needs to be included as if it were 
JavaScript. 

How does this help speed 
things up on our page? 

If your .js file is included in 
several HTML files, your browser 
only asks for it once. It stores it in 
the browser cache so it doesn’t have 
to ask the server for the file every 
time we go to another HTML page 
that references your script file. 

Why don’t we need the 
<script> and </script> tags 
in our my_scripts.js file? 

They are HTML tags. Since 
this is already being included in 
our page as a JavaScript file, the 
browser already knows what to 
expect in the file. 
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jquery events and functions 



jQueiy Magnets 

Use the magnets below to organize your project files so you 
know how to separate out your HTML, CSS, and jQuery code. 
Let’s make sure you can get this right every time. 


<!DOCTYPE html> 
<html> 


<title>Jump for Joy</title> 

<link href="styles/styles.css" rel= M stylesheet M > 
</head> 




I this ^ 


<div id= M header"> 

<h2>Jump for Joy Sale</h2> 

<div id="main"> 

<div ximg src 二 

<div class="guess_box n ><img src= 

<div class="guess_box n ><img src 二 
<div ximg src= 

</div> 

<script src="scripts/."></script> 

< src= n scripts/my_scripts.js"></script> 

</body> 

<html> 


images/j ump1.jpg"/></div> 
images/j ump2.jpg"/></div> 
images/j ump3.jpg"/></div> 
images/j ump4.jpg"/></div> 









$(document).ready(function() { 

$ ( ) .click( function() { 

var = Math.floor((Math.random()*5) + 5); 

var discount = "<p>Your Discount is "+my_num+" % </p>' 
$( ).append(discount); 


$(".guess_box M ).each( function() 
$ (this) .unbind('click'); 

})； 


})； 



index.html 

jquery-l.6.2.min. j s 


J^body^J 






my—scripts.js 
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jQueiy Magnets Solution 

Use the magnets below to organize your project files so you 
know how to separate out your HTML, CSS, and jQuery code. 
Let’s make sure you can get this right every time. 


<!DOCTYPE html> 
<html> 

I <head>1 


<title>Jump for Joy</title> 
<link href= M styles/styles.css 
</head> 


rel="stylesheet"> 


<body> 


<div id^ n header"> 

<h2>Jump for Joy Sale</h2> 


</div> 


<div id 
<div 


'main"> 


class=’’guess box' 


ximg src= M images/jumpl. jpg ， '/></div> 
<div class= M guess_box n ><img src= M images/jump2.jpg"/></div> 
<div class= M guess box n ><img src= M images/jump3.jpg"/></div> 

images/jump4.jpg"/></div> 


<div 
</div> 


class="guess box’ 


Ximg src: 


jquery-1.6.2.min.j s 


<script src="scripts/ 

<I script|src= M scripts/my_scripts.js"></script 〉 
</body> 

<html> 


></script> 


$(document).ready(function() 

$ ( 


j". guess box" | 

var j 

[my—num ] 

卜 


this 


).click( function() 


<p>Your Discount is "+my_num+" % </p>' 
.append(discount); 


- 1 - 

index.html 


$(".guess_box") .each ( function() { 
$ (this) .unbind('click'); 

m 


my—scripts.js 
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jquery events and functions 



Wouldn’t it be dreamy if we could write our 
jQuery code once, but use it again whenever 
we need? But I know ifs just a fantasy... 
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reduce, reuse, recycle 


Making things fuwctiow-al 

Now that we’ve seen how to add and remove events on our page, 
let’s look at another important feature that will help us master our 
websites with jQuery: functions. 

A function is a block of code, separate from the rest of your code, 
that you can execute wherever you want in your script. 

Believe it or not, we’ve been using functions all throughout the 
book. Remember these? 


These 如 a || 七 
have steady 

^llcd ih o[A\r Code. 

"th\roughou*t 
book so -Pav-. 


(document).ready(function() 


//Do stuff in here! 



$( n #clickMe n ).click(function(){ 

L-ook 



$( n .guess—box n ).click(function() 
//Do stuff in here! 


}) 


})； 



j Query provides a lot of functions for you, but you can also write 
your own custom functions to provide features not supplied by 
j Query. By creating a custom function, you can use your own code 
again and again without repeating it in your script. Instead, you 
just call the function by name when you want to run its code. 


Custom functions 
allow you to organize 
a cltuiik ol jQuery code 
hy name so tkat it can 
te easily reused. 


100 


Chapter 3 









jquery events and functions 


The wuts and bolts of a fuwctiow 


To create a function, you need to use a consistent syntax that ties the 
name of the function with the code that it runs. This is the syntax for 
the most basic JavaScript function: 




今 ivc the - Puh^tioh 


tuv-ly bv-atc- 




J N 


JLh-N 


Eh f wi£h 

a ^losihg <tuir|y bv^ e . 


The body of -the 

is whcv-c you pui youv- dodc. 


(Vet 叫 d i 

a 仏己七，。朽 . 


living functions names 

There are two ways to give names to functions. 


Function declaration 

The first method is a function declaration, which defines 
a named function variable without requiring variable 
assignment. This one starts with function, like so: 

The -fuv\6*b'»ov\ 灼 awe 

function myFuncl(){ 

$("div").hide(); 

} 

Function expression 

A named function expression defines a function as 
part of a larger expression syntax (typically, a 
variable assignment): 

var myFunc2 = function() { 

I $ ( f, div f, ) . show (); 

} ^\TV_s assies a vaH^ble 
while youVc at it 


Function names? But all 
the functions we’ve used so far 
didn’t have names. Why start 
giving them names now? 


Good point. 

Naming your functions allows 
you to call them from more than 
one place in your code. Unnamed 
functions — also known as 
anonymous functions — are pretty 
limited in how you can use them. 
Let’s look at anonymous functions 
in more detail so you can see how 
limiting it is not to have a name. 
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whafs in a name? 


The anonymous fuwctiow 


Anonymous, or self-executing, functions don’t have a name, and 
they get called immediately when they’re encountered in the 
code. Also, any variables declared inside these functions are 
available only when the function is running. 



1/Vc tall -this -fvom 

else *m ouv Code 


|-f y/C "to use 
i\\\s Codt cIscv/Kcv-c, 
we’ll iiavc *to 
duflidate •» 七. 


$(document).ready(function() { 

$(".guess_box") .click( function () 


var my_num = Math.floor((Math.random()*5) + 5); 
var discount = "<p>Your Discount is "+my num+ n %</p>' 
$(this).append(discount); 



variables 


i 


$(".guess_box") .each( function () 
$(this).unbind('click'); 

})； 



my—scripts.js 



Since we didn't give this function a name, 
we can’t call it from anywhere else in our code. 


Watch it! 


tWeiare no o 

Dumb Questions 


What is the difference between the function 
declaration and the named function expression? 

The main difference is one of timing. While they 
do the same thing, a function declared as a named 
function expression cannot be used in code until after it is 
encountered and defined. On the other hand, the function 
defined using the function declaration method can be called 
whenever you want to on the page, even as an onload handler. 


Are there any restrictions on what names we give 
to our functions? 

Yes. Function names should never start with a number 
and must not use any mathematical operators or punctuation 
marks of any kind other than an underscore (J_ Also, spaces 
are not allowed in any part of the name, and both function 
names and variable names are case sensitive. 
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jquery events and functions 


Named functions as event handlers 


Earlier, we saw how anonymous functions can be used as handler 
functions for events. We can also use our own custom, named 
functions as these handlers, and call them directly from our code. 
Let’s look closer at the two functions we named two pages ago. 


Function declaration 


function myFuncl(){ 

$ ( !! div !! ) . hide (); 


Function expression 


var myFunc2 = function() { 

$( n div n )•show(); 


11 a • 。灼 .~ 、 

ow ouv- todc. 1 

myFuncl() 

小 




( TT #myElement TT ) . click (myFunc2) 


Wc y\ccd He 

pa\rcy\*b^cscs V)cvc- 

The divs y/ill be hidden 
addov-d'mg *to vest o( 
•the dcdlav-a*tio^. 


No p^v-ch-thcscs 
needed wKch ouv* 
-Puh^-tioh is called as 
a hahdlcv -Puh^tioh 



Ca\\a Wfcor, as a 



This oy>C mcar>s 七 he divs 
y/ill be s\\oyNY\, a*f*t€V* 
⑽伙七 is ticked- 



jQueiy Magnets 

See if you can arrange the magnets to move the code that checks for the 
discount code into its own named function called checkForCode, and 
use it as the handler for the click event on the boxes. 


$(document).ready(function() { 

$(".guess_box M ).click( checkForCode ); 


var my_num = Math.floor((Math.random()*5) + 5); 

discount = "<p>Your Discount is "+my_num+ n %</p> n ; 


$ (this) .append( 


$(".guess_box") .each ( function() { 

$ (this) .unbind(' '); 


})； 



my—scripts.js 



Q |T| F lick J 


checkForCode | 
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jQueiy Magnets Solution 

See if you can arrange the magnets to move the code that checks for the 
discount code into its own named function called checkForCode, and 
use it as the handler for the click event on the boxes. 

as V^ 3 ^dlcv 


Ouv 七，。灼 

dc 6 lavat«o^ 


辛 


$(document).ready(function() 

("•guess box") .click( checkForCode ); 




By\d 七 he 

v/i"th d scmidolo^- 

TV\c v-ay\dow y\uwbcv 
v/c wed 

1^ … 七 e ， 


— — *m C^afbc^r 2- 

var my_num = Math.floor((Math.random()*5) + 5); 

I var I discount = "<p>Your Discount is "+my_num+ n %</p> n ; 

~ 1 r7 L fr^ _ 



$(this).append( 


$(".guess_box") .each ( function () 
$ (this) .unbind(' | click i ’）； 
})； 


SV^OV/ -tv^c d'»s6ou^*b 

ovx 


:n ( runcti 


0 

})； 


Remove the dlidk cvcht -fv-om 

box, like wc led\rhcd c3V"licv" 
this dhaptev-. 





tbls! 

▲ I 



my—scripts.js 


u did〆 七 


Nice work! Once you update your code file with this code, 
you’ll have created your first function and used it as a 
handler function in your click event. 





How would you create a function to hide the discount 
code in a random box, and another to generate a 
random number for the discount code itself? 


卞 ocj uuopue^ e 

> Wax 叫巧 f 叫-十祕 
⑽。人 CWV 叫巧叩。 

印…二％。”乎 
uuopvAN 3吩 W 赠“ 

e s ^- 
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jquery events and functions 



So, really, we need to have our function 
do something different based on which box 
is clicked...how can we do that? 


Sometimes we want functions to do a task repeatedly, 
but have the result change depending on information 
we give it. 

Our functions can accept variables passed into them — as you recall from 
Chapter 2, a variable is used to store information that can change over 
time. We’ve already looked at variables. Let’s remind ourselves how they 
work. 


vav- kcy^ov-d lc*b 
you dctlav-c a variable. 


A-Picv- -the va\r 
kcyv/ov-d, you 
you\r vav-iablc. 



This is how wc set 七 he value o( 
"the variable \y\ code 


var pts 


250 


參 


W\\tv\ we declare a variable, tKc 

JavaStvifi *m*tcv-fvc*tcv- 5'ivcs us 
some bv*ov/scv mcmovy m v/hidh 

S*toVC 



I/Ve hoirhc a viable so 

that wc 

•t loltcv- *m ou\r sdvip-t. 



Wig flade a value *m*to 
ouv variable us*m^ air> 








We’re already using some variables in our 
code, remember? 
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please pass the variables 


Passing a variable to a fuwctiow 

When variables are added (or passed) into functions, they are known as arguments. 
(Sometimes you may see them referred to as parameters too.) Let’s take a closer look at 
how to pass an argument to a function. 






arguments □ LD 0 


Pass m m 


^y\cAaoy\ 灼 awe 

k lcome 



瓜 3_civt 

function welcome (name) { 
alert ("Hello n + name); 

} With the av-gumchi 

// call our function 
welcome("John"); 


o The page M thinlyqyeTy.com says: 



The function doesn’t need to know what’s contained in the variable; it just displays 
whatever is currently stored. That way, you can change what the function displays 
simply by changing the variable, instead of having to change your function (which 
wouldn’t make it a very reusable function!). 

o 


Combining variables and functions 
might seem a bit hairy. 

But really, you can think of your function as 
a recipe — in this case, let’s say it’s for making 
a drink. You have the basic, repeatable steps for assembling a 
drink — a shot of this, a splash of that, swirl together, etc. — that 
compose your function, and the ingredients are your variables 
that you pass in. Gin and tonic, anyone? 
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jquery events and functions 


Functions caw return a value, too 


Returning information from a function involves using the return 
keyword, followed by what should be returned. The result is then 
returned to the code that called the function, so we can use it in the 
rest of our code. 




Alrgumch-t 




function multiply (numl , num2) { 


var 

ret 


result = numl*num2; 

[lt; po some 七叫狀 

i\\t 

Return a value* 


urn resu. 


Tke return type can 
te a a string 

oi text, or even a 
DOM element (otject). 


// Call our function 

var total = multiply (6, 7); 

alert (total) ; 


f 

它 The page M thlnlyquery.com says: 




〜 parpen your pencil 


Now that you can create your own functions, add a new function to 
your my_scripts.js file that accepts a single argument (called num), and 
then returns a random number based on the argument you give it. Call 
the function getRandom. 





my—scripts.js 
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sharpen solution 



Now that you can create your own functions, add a new function to 
your my_scripts.js file that accepts a single argument (called num) and 
then returns a random number based on the argument you give it. Call 
the function getRandom. 


灼 awe Alrgui^cirt 

va\r W 一 hum 二 A1 1 oor(M 0 决 

v*e*tu\rh 

^ Rc*tuvr\ v-ar\dom r^umbcv. 




my—scripts.js 


st'W 


aI 从 咖代 s 




OK, all that function and argument stuff is 
great, but how much nearer are we to finishing 
off the code for the Jump for Joy page? 


Jim: Well, along with our new getRandom function, we 
still need another one... 

Frank: .. .Right, one to put the discount code in a random 
box that can use the getRandom function. 

Joe: That makes sense. Then, after a click happens, we can 
check to see if the user clicked the right box. 

Jim: Wait, what? How can we tell if someone clicked on the 
right box? 

Frank: Conditional logic! 

Jim: What? 

Frank: Conditionals allow us to check for a particular 
situation and run the code accordingly. 

Joe: So we could say, check if a variable has a certain value, 
or if two values are equal? 

Frank: Exactly! We can even check if there is an element 
inside another element, which I think will help us here. 

Jim: Wow, I can’t wait to see this! 
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jquery events and functions 


Use conditional logic to make decisions 

j Query uses JavaScript’s conditional logic features. Using conditional 
logic, you can run different code based on decisions you want your 
code to make, using information it already has. The code below is just 
one example of conditional logic with JavaScript. We’ll look at some 
others in Chapter 6. 




f\ JavaSd\r'ip*t 
variable 


T\\t 七 v/c 

*to Ac 乙 k 



Do Something ! 名 


var 


}else{ 


w fee \rcad as w '»s c^al to. 


The Code v/c "to 

i-P y/ha 七 dhcdk -tuv^s 

out "to be tvuc 

XV^c 6odc >wa^*t *to 

yruvx, ^a*t 


// Otherwise Do something e *e! ou-t -to kc ^Uc 

No-tc ： You dor/ 七 wed a” else siait^i 
-to bala^e youv i-f sta 七 erwe 此 but it’s a 
^ood idea *to mdude 


or\C- 



jQueiy Magnets 


See if you can arrange the magnets to create a new named function called hideCode that 
uses conditional logic to hide a new span element, with the ID of has—discount, in one 
of the existing clickable . guess box div elements randomly each time. 


function () 


(4); 


var numRand = 

$ ( )•each(function(index, value) { 

if(numRand == index){ 

$(this)•append("<span id= 1 ’></ 

return false; 



my—scripts.js 
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jQueiy Magnets Solution 

See if you can arrange the magnets to create a new named function called hideCode that 
uses conditional logic to hide a new span element, with the ID of has_discount, in one of 
the existing clickable . guess_box div elements randomly each time. Here’s our solution. 




or\ 


var I hideCode 

-- 

var numRand 
$ ( 


function () 



Call ouv 



).each(function(index, value) 


^ - ^if (numRand == index) 

Cohdiiiohal 

loyd {q 匕 

w hcirc WC av-c ih 

ou ^ list io ou^ 


$(this).append("<span id: 
return false; 



GED 


> n )； 



Bvcak ou*t of 七 he 
cadKO loop. 


/\ad elemeyrt 

-to i\\t clcmcvrb W\i\\ 
.^ucss_Jbo><* tlass. 



my—scripts.js 



The index of an element in a list 
refers to where it appears on the list. 

Indexes always start at 0. 

So, the first element in the list has an index 
of 0, the second has an index of 1, and so on. 
We'll see more about using the index when 
we look at arrays and loops in Chapter 6. 
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jquery events and functions 


Cohditiohal logid 
"t° i-P the usev- 
has *Pouhd the 

disdouht 乙 ode 


A j^$ucv-y rwe 七 hod 
七 ha 七 dhctks i-f 
v/haicvcv- is \y\ 七 he 
-fiv-s-t pavarweiev 
doy>tarns wha-fcevev" 
is m ihc scCov\d 

pa\rarif»c-tc\r. The 

due s *m -the ^dme- 


Awesome! The discount will hide itself 
in a different box each time. These 
functions are getting to be really useful. 


Frank: Yes, they are. But now that you’ve hidden the code, can 
you find it again? 

Jim: Oh, uh, good question. I don’t know. 

Joe: I’m guessing we’ll need some of this conditional magic again? 

Frank: Exactly. Now, rather than picking a random index in our 
list of . guess—box elements, we’ll have to loop through them 
again to see if they contain our has—discount element. 

Joe: “Contain?” Hey, Frank, you might be on to something there. 

Frank: Yep. Let’s take a look at what jQuery has along these lines. 





fills! 



pctlavc tV>c 


d ： \sCo\AYyi vav_ 、 aWc. 


Update your checkForCode function to 
include some new code based on Jim, Frank, 
and Joe’s discovery. 


function checkForCode () { ^ 七 € 一伙七一 i.C” 如 ^ -Poir a VO/V\ 


var discount; 


ov\t 


^aUallcd 


if($.contains(this, document.getElementByld( n has—discount’ 


num+"%</p> M ; 


var my_num = getRandom(5); 
discount = "<p>Your Discount is ’▼ + 

}else{ 

discount = "<p>Sorry, no discount this time!</p>"; 

} 

$ (this) .append(discount); 



$(".guess_box").each( function() 
$ (this) .unbind('click'); 

})； 


S +，hd d ^i ,ode O, hot 



my—scripts.js 
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a custom function to call your own 


thlS, faa! 


辛 





Time to add some custom functions: one for generating 
a random number, one for hiding the code, and one for 
checking for the discount code. 


(document) . ready (function () { 

$(".guess_box").click( checkForCode ); 

function getRandom(num){ 

var my_num = Math, floor (Math. random() *num); 
return my 一 rmm; 钚 a 七 


V t，<>h Whch with 

the .gucss_box d\ass is disked. 


Ouv va^dow ^uwbev- 



num; 

} tidies disdour\*t vaviablc 

var hideCode = function(){ 

var numRand = getRandom(4); 

$( n .guess_box").each(function(index, value) { 
if(numRand == index){ 

$(this).append("<span id=▼has 一 discount'X/span>"); 
return false; 


})； 


C^ll "the hXd *fuh 乙 tioh … 


… 七七七 clU y ou 一七 * 

d'is£.ouy\*b Code 


hideCode(); 

function checkForCode(){ 
var discount; 

if($.contains(this, document•getElementByld( n has_discount' 
{ 


var my mom 

=getRandom(5); 


discount = 

"<p>Your Discount is ' 

▼+my num+ M %</p> n ; 

}else{ 

discount = 

n <p>Sorry, no discount 

this time!</p> n ; 


$(this).append(discount); 

$(".guess_box n ).each( function(){ 
$(this).unbind('click'); 

})； 

} 

}); / /End document.ready() 



my—scripts.js 
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jquery events and functions 


Jump for Joy needs even more help 

Just when you thought you were done with the Jump for Joy campaign, 
it looks like Emily has a few more requirements … 


From: Jump for Joy 

Subject: RE: Jump for Joy Promotion 

Hey, 

Thanks so much for all your work on this. 

I was wondering, is there a way you could highlight the box before people click 
on it? That way, theyll know which box theyre on, and it will lessen any confusion 

before they click. 

Also, instead of popping up the code, can you put it into its own easy-to-read area 
below the boxes on the screen? Can the discount code be some text toge er wi 
a number? I was thinking that might be nice... Oh, and can the number be bigger 

than just between 1 and 10? How about up to 100? 

Let me know if you think we can make these little changes! 

Emily Saunders 
jumpforjoyphotos.hg 


i^harpen your pencil 


Requirements: 


You know what to do. Pick out all the new requirements from Emily’s email. 


you are here ► 
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sharpen solution 


i^harpen your pencil 


You know what to do. Pick out all the new requirements from Emily’s email. 


Requirements: 


參杆七 whoever \>o% visitors arc oy\ bc-forc -they didk i*t, 
so *thcy kr\ow -for suve option -they avc dhoosih^. 

參 Pu 七 *the disdourrt Code *m*to i*ts ovm area oy\ *thc sd\rccr\. The 
disdouh*t Code should be and a number brbweeh I 100. 


tkereictre no 。 

Dumb Questi9ns 


Do we need to specify a return 
value for all our functions? 

Technically, no. All functions return a 
value whether you specify one or not. If you 
don’t tell a function what value to return, it will 
return a value of undefined. If your code 
is not able to handle an undefined value, 
it will cause an error. So, it is a good idea to 
specify a return value, even if it is something 
like return false;. 

Are there any restrictions on 
arguments or parameters that I can pass 
into a function? 

No, you can pass any object, element, 
variable, or value into a function. You can 
also pass in more parameters than your 
function is expecting. These will be ignored. 
If you pass in too few, the remaining 
parameters will automatically be set to 
undefined. 


What does the $ . contains 
method do? 

This is a static method of thejQuery 
library that takes two parameters. It checks 
all the child elements of the first parameter, 
seeing whether it contains the second 
parameter, and returns a true or false. 

In our case, $ . contains (document. 
body, document. 
getElementByld("header")) 
is true ； on the other hand, 

$.contains(document. 
getElementByld("header"), 
document. body) would be false. 

What is a static method in jQuery? 

That means it is a function that 
is associated with the jQuery library, as 
opposed to any specific object. We do not 
need a selector to call this method, only the 
jQuery name or its shortcut ($). 


What was that index and value 
about in our . each handler function? 

A: The index refers to where in the 
loop we are, starting at 0 for the first item 
in the array returned by the selector. The 
value refers to the current object. It is the 
same as $ (this) inside the . each loop 

Why does our . each loop in the 
hideCode function return false? 

Returning false in an . each loop 
tells it to stop executing and move on. If any 
non-false return value is returned, it will 
move on to the next item in the list. For our 
purposes, we know we have already hidden 
the code, so we can stop going through the 
rest of the elements. 





Can you think of a way to tell the user what square 
she’s about to choose before she clicks? 
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jquery events and functions 


Methods can change the CSS 


To complete our solution, we’ll need to highlight whatever box the user is 
hovering over before she clicks. The easiest way we can change how an 
element looks is with CSS and CSS classes. 


Thankfully, jQuery provides an easy way to give elements CSS classes and 
remove them again, with a few easv-to-use methods. Let’s have a look at how 
we can put them to use in our solution. 


Rcmcmbcv *t\iosc -f' 
C^aptcv-s I ar\A 2-? 


vom 



i k 卿 _ 

0>pe 


Create these new files, separate from your Jump 
for Joy files, so you can observe these methods in 
action. That should help you figure out how you 
can highlight the box before a user clicks on it. 


rel="stylesheet"> 


<html> 

<head> 

<link href="styles/test_style.css 
</head> 

<body> 

<div id="header" class= M no_hover"><hl>Header</hl></div> 
<button type="button" id= M btnl">Click to Add</button> 
<button type="button" id= M btn2">Click to Remove</button> 
<script src= n scripts/j query.1.6.2.j s"></script 〉 

<script src= M scripts/my_test_scripts.j s"></script> 
</body> 

</html> 

$(document) .ready(function() { 

$( n #btnl n )•click( function() { 

$("^header").addClass("hover"); 

$("^header").removeClass( n no—hover n ); 

}); 

$( n #btn2 n )• click ( function。{ 

$("^header").removeClass("hover"); 

$ ("^header") . addClass ( n no—hover ，'）； 

})； 

})； 


• hover{ 

border : solid 

} 

• no—hover{ 

border : solid 

} 


#f00 3px; 


#000 3px; 



- 0」 

test—style.css 



class test.html 



my—test—scri pts.js 
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test drive 



Tqst DriVQ 


Open your newly created class_test.html file in your browser. After clicking on the Add 
button, your class gets applied to the div, with the ID of header. Clicking the 
Remove button removes the class again! 


/D thinkjquery.com/jq 


_ 

3m/jqplay/ … ' 



-tat 


a fi Q, 


逼 I 


Header 










Click to Add Click 


Original 


/ \ 2 \ thinkjquery.com/jqplay/... 

夺 a fi Q, 


a A 



After click 



Sweet! If only everything were this easy. 
Does this CSS change work on anything 
other than a click event? 


Yes, it does. And it’s just as easy... 

You can switch up the CSS for any event type. But for 
this solution, you’ll need another event to help you out. 
Take a look at the list back on page 82 and see if you 
can figure out which event you’ll need to use. 
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jquery events and functions 


Add a hover evewt 


The hover event can take two handler functions as parameters: one 
for the mouseenter event and another for the mouse leave event. 
These handler functions can be named or anonymous functions. Take 
a closer look at the test script you just used to see how we can use the 
hover event to apply behavior to an element during the time the 
mouse is over the element. 



(document).ready(function() { 

$( n #btnl n )• click ( function。{ 

$("^header").addClass("hover"); 

$ ("^header") . removeClass ( n no—hover，') 

}); 

$( n #btn2 n )• click ( function。{ 

$("^header").removeClass("hover") 

$ ("^header") . addClass (’ 'no—hover ’，） 

})； 


my_test_scripts.js 


:卜 ^^oyeClassj^y 
Allows us to a CSS class 
TVoirn ah clcirneh-t. 


Tk addClass allots ^ 

{p add a CSS tlass {p ^ It 

T does CSS 心奶如 

element alvcady ^as. 


}); 





Update your my—style.css and my_scripts.js files so that the image boxes are highlighted 
when the user places the cursor over them. You’ll need a new CSS class to apply the 
hover to, and two handler functions in your script file (after your checkForCode 
function) that use the addClass and removeClass methods to set the CSS class. 
We’ve started those for you; you just need to write in the functions below. 

(".guess_box").hover( 
function () { 

// this is the mouseenter event handler 



my—style.css 


}, 

function () { 

// this is the mouseleave event handler 


})； 



my—scripts.js 
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exercise solution 



PLyilPH 

Set tlass 

of 七 V)C loo% >^cy\ 

{\\t usev- V\ovc\rs 

ovcv" >*b 七 W’s 

^v\OY^jw^oyAS ^3y\dlcv* 

-(*uy\C>*b'io^ *(*ov* 七 V>c ， 
wousccy\*bcv cvcv\t 


The vcmovcClass 
j($ucvy method 
lets you v-emove 
a CSS dldss -fv-o» 

3 灼 clcrwcrrt. 


Now you’ve got a CSS class you can 
manipulate with a hover event. 


rtcv-cs *tV)C y\c>w ^ls ss - 


^ .r 

ny hover { 



border : solid #00f 

3px; 

} 


my 



le.css 


TV^c addClass j^uevy me*tiiod lets you add a 
CSS tlass -to element \i dots r^oi a\\td 
a^y CSS classes *tiic element alv-cady i^as. 


(".guess_box").hover 
function () { 

// this is the /nouseenter event handler 

$(this).addClass( n my_hover"); 

}, 

function () { 

// this is the mouseleav^/^vent handler 

his).removeClassT^iW hover"); 


ttc^s a^Y^ous ^A\tr 
mousclcavc CVCht 



}); 



my—scripts.js 



Tqst DriVQ 


Open your index.html file in your browser, which should include your new my—scripts.js 
file. Move your mouse over the images and see if the border changes. 




[1 二阿 H “ 



Jump for Joy Sale 



firwm. The 

bovdev* dolov 

匕 halves y\o^i, bu-t 

"theme’s still mo\rc 
"to do”. 
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jquery events and functions 


You're almost there 


That’s definitely good progress, but the message still appears in the wrong place, and it 
doesn’t look the way you were asked to make it look. Plus, there’s still one requirement 
from the first email we didn’t cover yet. Here’s the requirements list as it stands right now: 


L b^>/^ VlSl|»VS 3V C bi*TvV i dlidk l*t) 

—ky^/ -Cov su\rg y/hai. opfeoh : fc hgy avg frboosihg. 


參 Pu 七 disdouh 七 Code \Y\bo i*ts ovm dred oy\ *the sdreeh. The 
disdouh 七 Code should be *twt ar\d a number between I a^d 100. 


參 A*f*tcr visi*to\r has made his guess ar\d dlidked oy\ d bo%, -the answer 
should be revealed as -bo y/hrthev or ^o*t he ^o*t i*t l-f he dhosc 

do\r\rcd*tly) show him *the disdourrt so he C^y\ apply i*t *bo his order- 



TWis erne’s 

-(•vow 七 he 
-f iv-s-b era'll! 



Update your checkForCode function to complete these last three things: 

1. Put the discount code in its own area on the screen. 


2. Make the code a combination of letters and a number between 
1 and 100. 

3. Show the visitor where the code was hiding, if she guessed wrong. 


To help you out, we’ve created these 
CSS classes that you can add to 
your my_styles.css file to indicate if 
the code was found or not. 

While you're at it, add a span element 
with the ID of result below the four 
boxes to display the discount code. 


• discount{ 

border : solid #0f0 3px; 

} 

•no_discount{ 

border : solid #f00 3px; 



my—style.css 
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exercise solution 





I 

pi 


OLjitlpH 


Now you’ve updated your checkForCode function with all the pieces you were asked for: 
a separate place on the screen for a discount code, a discount code consisting of text and a 
number up to 100, and indications of where the discount code was, after the visitor clicks. 


C\\tcV -to see 

i-f 七 Wis bo 乂 has 
i\\t distouy\-b 
Code, us'm^ 七 he 
toy\*ta'ms 


i"t docs, 
visually 

the 

box ix> 
tell people 
whcv-c the 

^odc Wds... 

...vf rb docs 

v\oi } sV^ov/ 

七 ha 七 *to 
i\\t usev-. 


function checkForCode() 


var discount; 


if ($• contains (this, document • getElementByld ( ， ’ has_discount n ))) 

{ — "to mdv*c3sc 

七 he dis 匕 ouivt Code bo a value up \x> 100. 

var my num = getRandom(100); 


discount = "<p>Your Code : CODE n +my_num+ n </p> ; 

}else{ 


Set "the 
outpu-t message, 
^ - - ^di^a-tihg 

discount = n <p>Sorry, no discount this time!</p>" ；whether the 

乙 ode is -Pouhd 

} o\r hot. 

$(".guess_box M ) .each (function() { 

if($.contains(this, dociament.getElementByld("has discount"))) 


$(this).addClass("discount"); 


}else{ 



$(this).addClass("no discount") 


$(this) .unbind(); 


})； 


七 c ou-bpu-t wessay 

pay m*bo ov/yv area. 


$("#result M ).append(discount) 

// End checkForCode function 



my—scripts.js 
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jquery events and functions 



Tqst DriVq 


Now that you’ve updated your checkForCode function, test out all the new 
features on the Jump for Joy website. (For comparison, your code should look like 
what is in this file: http:/ / thinkjquery.com/chapter03 / end/scripts/my—scriptsjs) 









Jump for Joy Sale 








HOO 

0300 




Jump for Joy Sale 


Loaded page 





► discount this time! 



jTTifripn'^r 


Jump for Joy Sale 


No discount code 








Vbur Code: CODE48 


0 




4 



discount code 
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your jquery toolbox 



Your jftuery Toolbox 

You’ve got Chapter 3 under your 
belt and now you’ve added events, 
reusable functions, and conditionals 
to your toolbox. 






use ㈣ 、 


•Wt 






，一 一:二 c 
r 工 ::〆 

. a u\ c s (or a，— 
\/ 0 “扣 d ; w 七 、 ovxs ， 扣 A 

° r ?a r t 々一此 ， w 

o a _ 


〜仏 ’ Cio ^ doi^ 

^ ^ ds c 

Wkd. , ^ ，is ^oi 



Events 

Objcdts i^ai v>cl\> ^CVS m 七 evad 七 
v/*i*bK a >wcb 州 c. 

TKcv-c avc avouy>d 七 km, 

arvd just about ar>Y*t^3 栋 吐 … 
\\a^tY\ OY\ d bvov/sev- darv -tv-i^cv 

dy> eve 灼 t 



mdvs 
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4 jQnery Web psige manfpulqtipn 


♦ 參 _ Mod the DOM ♦ 



Just because the page is finished loading doesn’t 
mean it has to keep the same structure. Back in 

Chapter 1, we saw how the DOM gets built as the page loads to set up 
the page’s structure. In this chapter, well look at how to move up and down 
through the DOM structure and work with element hierarchy and parent/ 
child relationships to change the page structure on the fly using jQuery. 


this is a new chapter 
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one page to rule them all 


The Wcbville Eatery wants an iwtcractivG menu 

Alexandra, the head chef of the Webville Eatery, has a job for you. She’s been 
maintaining separate web pages for different versions of her menu: the regular 
menu and the menu with vegetarian substitutions. She wants you to make one 
page that will adjust the menu for the restaurant’s vegetarian customers. 



We put our menu on 
the Web a few years ago, and our 
customers love it! Wed like you 
to add some buttons that let our 
customers change and highlight 
the web menu on the fly. 







Restore Menu 


Go 
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jquery web page manipulation 


fro vcgetariaw 


Here’s what Alexandra would like you to do. 


“:二:二: 一.一 

伽 se 一丄 — 一 

j 丄 ^ 4V wCW to 'ts 


w cat W d'shcs c v 
今 al 抓心咖 a ^ ⑽七 

心 ㈣ 口 . | @ v 


Before we write any jQuery, let’s look at the HTML and CSS files 
the web designer sent us, and see if their style and structure are up 
to snuff. 


Thcv-c^s Y\o occv-disc -Pov- i*t *this 
•time avound — bedause you vc 
fvobably already i*t 一 bu 七 

be suve *to >wv*i*tc dovm >wha 七 *thc 
v-c^uivcmcr>*ts av*€ youv o ^ iy \ 
>wov*ds so you k^ov/ wha*t you v*c 
buildm^ hcv*c- 
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build your DOM tree 



DOM Tree Magnets 

Dig into the current structure of the web menu by diagramming 
how the DOM sees it. Below, you’ll find all the element magnets you 
need to complete the tree. Using the HTML fragment for the menu 
on the right, complete the tree. Each magnet will fit where you see a 
hollow circle. We’ve done a few for you already. 





s 



ul class= 
"menu list” 








回 


回 


ul class= 
’’menu list’’ 





ED 


I - 1 n I ul class 

h4 1 ~~ I—i-J ” menu 一 lis 


ul class= 


&J L 


menu entrees" 


1 回 
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jquery web page manipulation 




This is jus-t a o( 

七 he adiual HTML page. 


<body> 

<div id="menu_wrapper"> 

<div class= M left_col"> 

<h4>Dinner Entrees</h4> 

<ul class = M menu_entrees M > 

<li>Thai-style Halibut 

<ul class="menu_list"> 

<li>coconut milk</li> 

<li>pan-fried halibut</li> 
<li>early autumn vegetables</li> 
<li>Thai spices </li> 

</ul> 

</li> 

<li>House Grilled Panini 

<ul class= ，， menu 一 list ’，> 

<li>prosciutto</li> 

<li>provolone</li> 

<li>avocado</li> 

<li>sourdough roll</li> 

</ul> 


</li> 

<li>Southwest Slider 

<ul class= M menu_list"> 

<li>whole chiles</li> 
<li>hamburger</li> 
<li>pepperjack cheese</li> 
<li>multigrain roll</li> 


</ul> 

</li> 

</ul> 

</div> 

</div> 

</body> 



index.html 
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DOM magnets solution 



DOM Tree Magnets Solution 

It looks like all the ingredients are set up as child list items of the 
parent entree list items. They aren’t really labeled very clearly or 
uniquely, now are they? 



div class= 
'menu wrapper' 


I 


F*o\rtur>a*tcly -pov us, 
duV*v*C^*t web d 

do^sis*tcr>*t s*t\rud*tuvc *to i*t- 


div class: 
"left col' 




V 



T\\t W'CV'VA VASCS av' 


y^orAtrtA 




⑼ a 


\xsi 知 



ul class= 
menu entrees 


ul class: 
'menu list 



• ^ Ust) as a nested 

(vaI^O'7 , » ^Jr 

一加 “ St eW 沘 


ul class= 
menu list 


IDSStiD [EjH 



V 


Bath ’myedi ⑶七 m tBt\) 
tr\{xtt is 3 lis 七 i*tcm. 




回回 


Wt hccd wlr 心 that will -Pihd the ihgvcdichts 

wc hccd ^ At this level, IhcyVc all list dements 

so iioy/ cav\ >MC distm^u'isK 
七 he m^v-cdici^is >wc >wa^*t *to 
subs*t*i*tu*tc -fv-om *tKc vcs*t? 
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jquery web page manipulation 


<body> 

<div id=’ ， menu 一 wrapper ’，> 

<div class= M left_col n > 

<h4>Dinner Entrees</h4> 

<ul class= n menu—entrees"> 

<li>Thai-style Halibut 

<ul class= ，， menu 一 list ，，> 

<li>coconut milk</li> 

<li>pan-fried halibut</li> 
<li>early autumn vegetables</li> 
<li>Thai spices </li> 

</ul> 

</li> 

<li>House Grilled Panini 

<ul class= ，， menu 一 list ’，> 

<li>prosciutto</li> 

<li>provolone</li> 

<li>avocado</li> 

<li>sourdough roll</li> 

</ul> 

</li> 

<li>Southwest Slider 

<ul class="menu 一 list ，，> 

<li>whole chiles</li> 
<li>hamburger</li> 

<li>pepperjack cheese</li> 
<li>multigrain roll</li> 

</ul> 

</li> 

</ul> 

</div> 

</div> 

</body> 





This is jus-t 

o( 七 he adiual 
HTML page- 



index.html 


Regular web page structure (HTML) makes writing jQuery code much easier, but 
the ingredient elements we want to find aren’t labeled in a way that will make our 
jQuery code easier to write. How can we make our elements easier to select? 
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you said you were high class... 


Class up your elements 


As we’ve seen in each chapter so far, we can help jQuery find elements on web 
pages more effectively by setting up our HTML and CSS properly. To really 
make our structure sing, we should add classes and IDs to our style sheet and set 
our HTML elements’ attributes with the appropriate classes and IDs. This makes 
selecting elements easier and saves you coding time later on. 


For j Query, selectors aren’t just about controlling the look and feel of your page. 
Selectors allow j Query to match (or query) elements on the page, too. 


鏞 

<li>chicken</li> 




Y°^ ^ w\riic a sdcd-tov (or eadh 

•n^redieivt you bo maidh... 



m 


<li>eggs</li> 


<li>turkey</li> 



<li>lamb shoulder</li> 


… ov you youf m a 


meat n >lamb shoulder</li> 



<li class= n meat">turkey</ li> 


<li class= n meat">eggs</li> 
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jquery web page manipulation 



Find the menu substitutions the head chef wants and label each one with the appropriate 
class (fish, meat, or hamburger). If an ingredient doesn’t need a class, leave the line blank. 
The HTML is laid out just like your menu will appear on the page. 


<li>Thai-style Halibut 


<li>Frittata 


<ul class= M menu list’ 

，> 

<ul class= M menu 

list M > 

<li 

>coconut milk</li> 

<li 

>eggs</li> 

<li 

>pan-fried halibut</li> 

<li 

>Asiago cheese</li> 

<li 

>lemongrass broth</li> 

<li 

>potatoes </li> 

<li 

>vegetables</li> 

</ul> 


<li 

>Thai spices </li> 

</li> 


</ul> 




</li> 


<li>Coconut Soup 



<ul class= M menu list M > 


<li>Braised 

Delight 


<li 



>coconut milk</li> 

<ul class: 

= M menu 

list' 

'> 

<li 



>chicken</li> 

<li 



>lamb shoulder</li> 

<li 



>vegetable broth</li> 

<li 



>cippolini onions</li> 

</ul> 




<li 



>carrots</li> 

</li> 




<li 



>baby turnip</li> 





<li 



>braising jus</li> 

<li>Soup Du 

Jour 



</ul> 




<ul class: 

="menu 

list’ 

，> 

</li> 




<li 



>grilled steak</li> 





<li 



>mushrooms</li> 

<li>House Grilled 

Panini 

<li 



>vegetables</li> 

<ul class: 

= M menu 

list' 

'> 

<li 



>vegetable broth </li> 

<li 



>prosciutto</li> 

</ul> 




<li 



>provolone</li> 

</li> 




<li 



>avocado</li> 





<li 



>cherry tomatoes</li> 

<li>Hot and 

Sour Soup 


<li 



>sourdough roll</li> 

<ul class: 

= M menu 

list’ 

，> 

<li 



>shoestring fries </li> 

<li dlass 二 

>roasted pork</li> 

</ul> 




<li 



>carrots</li> 

</li> 




<li 



>Chinese mushrooms</li> 





<li 



>chili</li> 

<li>House Slider 



<li 



>vegetable broth </li> 

<ul class: 

= M menu 

list' 

，> 

</ul> 




<li 



>eggplant</li> 

</li> 




<li 



>zucchini</li> 





<li 



>hamburger</li> 

<li>Avocado 

Rolls 



<li 



>balsamic vinegar</li> 

<ul class= M menu list M > 

<li 



>onion</li> 

<li 



>avocado</li> 

<li 



>carrots</li> 

<li 



>whole chiles</li> 

<li 



>multigrain roll</li> 

<li 



>sweet red peppers</li> 

<li 



>goat cheese</li> 

<li 



>ginger sauce</li> 

</ul> 




</ul> 




</li> 




</li> 
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exercise solution 






PLjiiipH 


Find the menu substitutions the head chef wants and label each one with the appropriate 
class (fish, meat, or hamburger). If an ingredient doesn’t need a class, leave the line blank. 


<li>Thai-style Halibut 
<ul class= n menu 一 list n > 
<li 
< 1 i 
<li 


<li>Frittata 

<ul class= M menu list M > 


>coconut milk</li> 

<li 

二 >eggs</li> 

>pan-fried halibut</li> 

<li 

>Asiago cheese</li> 

>lemongrass broth</li> 

<li 

>potatoes </li> 

>vegetables</li> 

</ul> 


>Thai spices </li> 

</li> 



</ul> 

</li> 

<li>Braised Delight 

<ul class= n menu 一 list n > 

<li dl3SS^ lU |r«C3*t W >lamb shoulder</li> 

<li >cippolini onions</li> 

<li >carrots</li> 

<li >baby turnip</li> 

<li >braising jus</li> 

</ul> 

</li> 

<li>House Grilled Panini 
<ul class= n menu 一 list n > 

< i i >prosciutto</li> 

<li >provolone</li> 

<li >avocado</li> 

<li >cherry tomatoes</li> 

<li >sourdough roll</li> 

<li >shoestring fries </li> 

</ul> 

</li> 

<li>House Slider 

<ul class= n menu 一 list n > 

<li.>eggplant</li> 

<li.>zucchini</li> 

< i i. 咚 I >hamburger</li> 


<li>Coconut Soup 

<ul class= M menu_list M > 

<li.>coconut milk</li> 

<li … • • >chicken</li> 

<li.>vegetable broth</li> 

</ul> 

</li> 

<li>Soup Du Jour 

<ul class= M menu_list M > 

<li ^>1 為冬 ? >grilled steak</li> 

<li >mushrooms</li> 

<li >vegetables</li> 

<li.>vegetable broth </li> 

</ul> 

</li> 

<li>Hot and Sour Soup 
<ul class= M menu_list M > 

<li... 如 >roasted pork</li> 

<li.>carrots</li> 

<li.>Chinese mushrooms</li> 

<li.>chili</li> 

<li.>vegetable broth </li> 

</ul> 

</li> 

<li>Avocado Rolls 


<li 

>balsamic vinegar</li> 

<ul class= 

"menu list M > 

<li 

>onion</li> 

<li 

>avocado</li> 

<li 

>carrots</li> 

<li 

>whole chiles</li> 

<li 

>multigrain roll</li> 

<li 

>sweet red peppers</li> 

<li 

>goat cheese</li> 

<li 

>ginger sauce</li> 

</ul> 


</ul> 


</li> 


</li> 
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jquery web page manipulation 


Puttow things up 


Now that you’ve got things mostly set up, let’s go back to the napkin with 
the head chef’s requirements. Next up, you need to build two buttons. 




一 lA/c a VeytavW’ buttw 如七 auWat^^lly 

substitutes i\>t /吵七 vcytanay> option oy> our v/cb 州 ⑽. 



<div class= M topper M > 
<h2>0ur Menu</h2> 
<ul> 


<li class= M nav M > 
<li class= M nav M > 


</li> 

</li> 


</ul> 
</div> 



(document).ready(function() 
var v = false; 



index.html 


if (v —— false){ 

v = true} 

}); // end button 


if (v —— true){ 

v = false;} 

}); // end button 
}); // end document ready 


my—scripts.js 
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sharpen solution 


— i^^irpen your pencil 


Update the structure and script to make the two buttons from the napkin. Give the "Go 
Vegetarian" button an ID of vegOn and the "Restore Menu" button an ID of restoreMe. 



<div class= M topper M > 

<h2>Our Menu</h2> 

<ul> 

<li class= M nav M > <butboh id: 〜 \/eyt3\riah</buttoh> </li> 

<ii ciass= M nav M > <bu*t*(x>h id 二 Mcy\u</bu*t*toh> </ii> 

</ul> 

</div> 



Build button clcmClr>*U 
of dir>d VCS*fcoVcA1c- 


index.html 
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jquery web page manipulation 


Whafs wcxt? 


That was quick! You’ve got the two buttons set up. Let’s check those items off of the 
napkin and move on to the stuff that the “Go Vegetarian” button needs to do. 




We v/ahi a v/e^etavi3n ， tna-c dutomat^aily 


七 U、C VI 


v/e^etaviSn 


oy 七 io 杓 mernr" 


■//el! need o sedvnu bwi/Lon "Cnd"C V*CSlfcoycs *thc 
ovn^mal s-fcaie. - 


rteve S our substrtuWs 赠 k: 

一 ^ oWW ⑽ substiMcs U our ^ C^ecs, SO v/e ««d 

七 hose ve 州 oved. 

一 lA/e 5 ia,*b ? orUeIlo -usWoo^s as a ve^ia^ 

substi*bu*bc -fov our Kar^buryvs. 

一畋 Uu 舡 a ve^a^ri 扣 substitute ^oy all our 
r^tai ay>a disks 七 “buf • 









In your own words, write the three things that the “Go Vegetarian” button needs to do. 




2 . 

3. 


you are here ► 


135 








































exercise solution 



Rct$6 


j 

PI 


plytipH 


In your own words, write the three things that the “Go Vegetarian” button needs to do. 

1 Ma*tdh li elemcr\*b -the -fish dlass ar\d remove those e^-tv-ecs -from -the menu. 

2. li dcr«Ch*ts *m *thc hamburger dldss a^d replace wi*th po\r*tobcllo mushroonas. 

3. A1c|*bth li elements m -the meat dass a^di replace them wi-th *b>fu. 

V Doh,t wo\r\ry i-f youv- ahswe^s 

ww a bit di^cv-cht Tv-ahslatmg 
\rc^ui\rcrwchts ih-fco stu-Pf that youv- 
web app K^ds ■{» do takes yrathtc 


Our next task is to tackle item 1 above: match li elements of the fish class and 
remove them from the menu. We matched elements with class selectors and used 
remove to take elements out of the DOM in Chapter 2. 

j Query also offers us the detach method, detach and remove both take 
elements out of the DOM. So what’s the difference between the two methods, 
and which one should we use? 


remove 



"The \rcmovc method drops -the 
dcrwCh-t out o-f the DOM- 


$ ( TT img#thumbnail n ) . remove (); 


detach 



T h f method takes the selected cUcMs) out 

but holds Oh -to \i so i^ai it be v-cattadhcd latcv-. 



$ ( TT img#thumbnail n ) . detach (); 
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jquery web page manipulation 


^harpen your pencil 


In the space provided, write the selector and remove or detach 
code that will create the result shown on the right. 


Pom v-csuii 


j^ucry s-baicmchi 




div class: 
"pic box' 




I li class= I 
1 "fish" I 
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sharpen solution 


i^harpen your pencil 


In the space provided, write the selector and remove or detach 
code that will create the result shown on the right. 


1/VliCh you \ruh 
\rCrwovc o\r dctadh 

oy\ ah clcr^ch-t, all 

°*P 

^liildlrCh will b 
removed as well 


Pom result 


j 夕 uery s-baicmchi 





div class 
"pic box 


/( u div#*bop W ).\rcmovcO 


■bV^a-b all 

七 he clcwc^*b 

i\^t scUtW W«ll 

)ot 




f( u div p w ).dc*tathO 


]/^l\\tY\ you youp *tV^c 
elements by tlass or 
IP, you cav\ be w>ov-c 

{\\OSt clcw'C^'b- 



I li class= I 
1 "fish" I 
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jquery web page manipulation 



Tqst DriVQ 


Add the line of code for the third Sharpen Your Pencil solution inside the vegOn 
button click function in your my—scripts.js file. Then, open the page up in your 
favorite browser to make sure everything’s working. 





ll <• “ 




_ 



Our Menu 




Go Vegetarian ； 

'Restore Menu^ 


Dinner Entrees 


Poached Salmon 

salmon white wine sal 
black pepper 

Roasted Trout 

grilled trout mint cape 】 
olives tomato lemon 
olive oil potatoes 

Thai-stylc Halibut 

coconut milk pan-fried 
halibut lcmongrass broth 
early autumn vegetables 
Thai spices 














^ Bc-Po\rc 

fV u li.-fish w ).dcta^O 


f( w li*fisWO.dc*ta^O, all 

tlass o-f -fisV) avc ywe. 


Our Menu 


l/Ve \rcrnovcd this... 


Go Vegetarian 


Restore Menu 


"•bu 七 


\Dinner Entrees 


"to \rcrwovc the 

I—» \ 


vyy 

RoHtal 


Salmon 
white wine 
pepper 


whole 


salt black 




Trout 

mint capers olives 
tomato lemon olive oil 
potatoes 


lc Halibut 
coconut milk lcmongrass 
broth early autumn vegetables 
Thai spices 


Soups and Sides 


Coconut Soup 

coconut milk chicken 
vegetable broth 

Soup Du Jour 

grilled steak mushrooms 
seasonal vegetables 
vegetable broth 

Hot and Sour Soup 

roasted pork carrots 
Chinese mushrooms chili 
vegetable Broth 




The detach method definitely got rid of stuff, just not everything we wanted to 
remove. We removed the list element of the entree. What we need to do is to remove 
the entire entree inside which the .fish list element is nested. 


How do we tell the DOM to detach the entire entree? 
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it’s ok to monkey around 


Swinging through the l?0M tree 

In Chapter 1, we learned that the DOM is built like a tree. It has a root, branches, and nodes. The 
JavaScript interpreter in a browser can traverse (and then manipulate) the DOM, and jQuery is 
especially good at it. DOM traversal simply means climbing up and down and across the DOM. 


We’ve been manipulating the DOM since Chapter 1. The detach method we just looked at is an 
example of DOM manipulation (i.e.，we dynamically take elements out of the DOM). 

But what is traversal really all about? Let’s take one section of the menu and visualize it as a DOM 
tree to see how traversal works. 


or\ ^o\ay- yav! VOM 

iv-dvev'Sdl is dll about mov'm^ uf, dovjv\, 
av\d sideways across VOM- 


^lir^b up the 

VOM, wc use 

j^c\ry f>a\rey)i 
method. 


匕 limb dowh the VOAI, 

c^y\ use J^ucv~y 
^hildvch method. 



3 回 s 


J d ^ oss ^ we — w 

the j^ueiry methods. 



o 0 


'Climb the DOM tree/ 1 
Right. How exactly does this 
traversal stuff help me out 
with detaching entrees? 


Traversal methods let you select an 
element and grab other elements 
above, below，or beside it. 

Let’s take a closer look at how you can grab those 
elements. 
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jquery web page manipulation 


Traversal methods climb the POM 


To tell the DOM that we want to detach entrees whose menu lists contain fish, 
we have to reference elements by their relationship, j Query ? s traversal methods 
allow us to get at those element relationships. 


Select all -the clcmchts 

"the *fish class. above -those clcmc^*b. 

$ (▼▼ • f ish▼▼ ) • parent () 



ul class= 
'menu list' 




This is the pav-cht 
o-P li.-fish. 


all the cUchts i h 

the 眯 Chu—list dbss. 


below *thosc elemerrts- 

$( M .menu list ”） .children() 


ul class= 
'menu list' 




These avc dhildv*cr> 
of ul list 


Select dll the Th ⑶ yt 七 ^ siblm^ clcmcr>*t 

… the *Pish 匕 lass. immediaiely *to *thc le-P-fc- 

\ _ 

$( M .fish").prev() 


Select all the clcmchts siblm<\ element 

the -pish 匕 lass. immediately *to {\\t 


( 


11 .f?s 



h M ).next() 


ul class= 1 


ul class= 

"menu_lisf' J ^ 


"menu list" 


P^V-Cht o( 

li-fish. 





El 





Which of these methods can help us detach menu 
entrees with elements in the fish class? 
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no weak links here! 


Cham methods to climb farther 

What if we want to climb higher, lower, or deeper? Strap on the 
chains, man! jQuery offers us method chaining. Method chaining lets 
us manipulate and traverse our pages in a more effective way. Here’s 
how it works: 


To (y> ov\t favcr>*t 
\us*t add a^o-tKcv- method 

心 *to mC*thod dham- 


( fT . fish" ) .parent () .parent () 


❺ The second parent 
method in the chain 
gets us here. 


o The first parent 

method in the chain 
gets us here. 





This is the 


You 6 ad maUil metiiods -too. 




$ ( fT .menu list" ) .parent () .next () .remove () 


❺ The next method 

climbs to the sibling 
to the right. 


ul class= 
'menu entrees' 


o The parent method 
climbs up to the 
element that 
encloses the selected 
element(s). 



ul class= 
'menu list' 


The remove method 
takes the element we 
traversed to out of 
the DOM. 
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jquery web page manipulation 



Go to http://www.thi_uery.com/chapter04/traversal/dind open the JavaScript console 
in your favorite browser’s developer tools. The “Read Me” section at the front of the 
book covers browser developer tools. Run each of the four traversal methods along 
with the chained detach method as shown below. Then, write why or why not this will 
help us with the problem at hand. 

Important: Make sure to refresh the browser after running each statement. 


$(".menu_entrees").children().detach() 


$(".menu_list").children().detach() 


$ (".fish") .parent() .detach() 


$ (".fish") .parent() .parent() .detach() 
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exercise solution 


©pi 


PLjiiipH 


Go to http://www.thi_uery.com/chapter04/traversal/and open the JavaScript console 
in your favorite browser’s developer tools. Don’t remember how to use browser dev 
tools? Head back to the “Read Me” section of the book to refresh yourself. Run each 
of the four traversal methods along with the chained detach method as shown below. 
Then, write why or why not this will help us with the problem at hand. 


Important: Make sure to refresh the browser after running each statement. 


$(".menu_entrees").children().detach() 

This *tv*3vc\rsal method dKildrCh o-f |*t >wo\rk 

-for 匕 orrtaih -fish because i*t removes ^LL *the tnhett lis*ts. 

Crud! No 七 wha*t heeded* 





Dinner Entree 


V 


Wo>W-2-CC ^ 0VJ f 
lAfe delated aH. 
of 七 he cy\*bv-ccs. 


$(".menu_list").children().detach() 

This -traversal method de*b3dhcs dhildv-Ch <y( mnern^ I 七 wor / 七 work -for 

renaovih^ dorrtam -fisK bedduse rb vemoves *tKc lis*t of myredierrts -fvom every 

ul.nr\Chu_ Jis*t. Ooysf No*t wha*t we warrted a*t all. 



Dinner Entrees 

Poached Salmon 
Roa&tcd Trout 
Thai-style Halibut 
Braised Delight 
House Grilled Panlnl 
House Slider 



"took away the list 
°f '^a^dich-ts -fvom all 
the Ch-tvccs. 



144 Chapter 4 



































jquery web page manipulation 


$ (".fish") .parent() .detach() 

This •tv'avcrsal nr\C*thod drt^dhcs -the parerrt dcn«Ch*t -fish. |*t woh ’ 七 work -for 
cr\*tvccs 七 dor\*ta*m -fish because i*t does^-t 50 -far enou— up *the DOM bett- Instead, i 七 
removes ul mchu^lis-t (dhd everythbelow i*t)- 


eao 




X 

f \^r 


- 


Dinner Entrees 


^ 铋 ok away ihc list of 
i^cdichts i h the bu-t 

的七 the chiv-cc itscl-p. 


Poached Salmon 
Roasted Trout 
Thai-style Halibut 
Braised Delight 

lamb shoulder cipollnni onlon& carrots baby rumip roa&tcd red 
grapes braising jus 


House Grilled Panini 

proscuttio pravolonc 
shoestring fries 


avocado cherry tomatoes sourdough roll 



(".fish") .parent() .parent() .detach() 

This *tv3ve\rsal method -the paverrt of *the parerrt clci^Ch*t -fish. 

I 七 does jus 七 wha*t we need i 七 * bo do. 


H O O 


‘A- 


Dinner Entrees 



TWis \s 4a 七 Y/ayrbed. 

The 私 C^CCS a^rc 

Braised Delight 

lamb shoulder cipoilnnl onions carrots baby rumip 
grapes bral&mg jus 


roasted red 


House Grilled Panini 

proscuttio pravolonc 
shoestring fries 


avocado cherry tomatoes sourdough roll 


House Slider 

marinated eggplant zucchini hamburger balsamic vinaigrette- 
onion carrots Multi-grain roll goat cheese 


Southwest Slider 

whole eMes hamburger pcppcrjack cheese onion 
sliced avocado Multi-grain roll 
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where did those elements go? 




Right. We can’t just detach the fish entrees 
and forget about them. 

We’ll have to rethink our code a bit to make this work. 


ul class= 
'menu entrees' 


^ list elects 

七 ha 七亡 oirt^ih -rish. 


li 

\\ ， 

| 

li 

li 

~TL 

f \ / 

T 



ul class= 
'menu list' 


ul class= 
'menu list' 


li class: 
"fish" 






li class: 
"fish" 


li 


、f 




ul class: 
'menu list 


li class: 
"fish n 



$ Gh pull owr cle^chis out 
^ ^ ^0/V\ with dcia^, 

卜七广七 about gcttmg thcr, 
wheh we heed -them? 





We need to bring back the fish entrees later. 
What should we do with them? 


勢 
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jquery web page manipulation 


^harpen your pencil 


We’ve seen quite a few jQuery and JavaScript constructs so far. Which ones do we 
need so that we don’t forget the . fish class elements? Write a "Yes” or "No” in the 
"Should we use it?” column for each, and explain why you chose or didn’t choose it. 
We did one for you, so now you’re down to three. 



Should we 
use it? 

Why? 

Terminator 

hlo 

A *tevWma*bov simply a l*t wor/ 七 solve -the problem 

rcmcimbcrmg -the clc^ch*b. 

Variable 



Function 



Selector 
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sharpen solution 

^barpen your pencil 

We’ve seen quite a few jQuery and JavaScript constructs so far. Which one do we 
need so that we don’t forget the • fish class elements? Write a "Yes” or "No” in the 
"Should we use it?” column for each, and explain why you chose or didn’t choose it. 
Here’s our solution. 



Should we 
use it? 

Why? 

Terminator 

Ho 

h *tcvm'ma*bov simply tv\ds a l*t 七 solve problem o-f 

dt{^cMcd elements. 

Variable 


A variable stores s*tuH -for us. |-f wc short deiadhed y/c C^y\ 

badk la*tcr by simply variable. 

Function 

Ho 

A -fuhd*tioh lets us per-form r«ar\ipula*tiohS ov\ The pvoblcm y/i*th 

dt\^C\\cd dc^cr\*ts is a pvoblcm o-f s*bo\r*m^ dd*ba ； ho*t mahipulatm^ i*t- 

Selector 

Ho 

A selcdW sclcdis based oy\ *m -the VOM- already 

selected our clc^chis. I/Vha*t wc y\eed is a y/ay bo shore those 


thereicire no o 

Dumb Questi9ns 


I get remove and detach, but 
what if I just want to get rid of something 
inside an element and not the element 
itself? 

To get rid of the content in an element, 
you can use the empty method. Let’s say 
you want to delete all of the stuff inside the 
paragraphs on a page; just do this: 

$ ( "p") .empty() ; ■ 

Is there a way to traverse all of an 
element’s parent elements? 

Yes. In addition to the parent 
method, jQuery also offers the parents 
method, which lets you traverse all of the 
selected element's parent elements. You’ll 
see this method in action later in this chapter. 


What if I want to get the parent 
element nearest to the selected element? 

A- 

You can use the closest method. 
Like the parents method, the closest 
method will climb through an element’s 
parent elements, but it stops when it finds 
a match. For example, if you want to find 
the closest ui above a list item, use this: 

$ ( n li M ) .closest( M ul"). 

^^-1 know about next and previous, 
but what if I want to traverse all of the 
elements on the same level of the DOM tree? 

Fortunately, the jQuery team has 
thought of that one, too. The siblings 
method will traverse all of the elements at 
the same level as the selected element. 


Does Google Chrome have jQuery 
built in? 

A. 

Jr \* No. The reason we can run jQuery in 
Chrome’s browser dev tools is that we’ve 
included jQuery in the HTML page. If you 
visit a web page that doesn’t use jQuery, 
don’t expect the Chrome JavaScript console 
to run jQuery statements. 
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jquery web page manipulation 


Variables caw store elements, too 

Variables must be pretty useful because we find ourselves needing them again. 
We’ve seen variables throughout the first three chapters, but we’ve only used 
them to store numbers and text strings. Wouldn’t it be convenient if JavaScript 
variables could store our elements too? As it turns out, they can. 


The detach code runs. 


I 

❻ 


(".fish") .parent () .parent () .detach() 



jQuepy code 


Xy 7 Beliind 
the Scenes 



Using the jQuery library, the 
JavaScript interpreter asks the 
DOM for the selected elements. 


o The DOM grabs the selected 
elements and returns them to 
the interpreter. 



JavaScript 

interpreter 


Hey, DOM, give me back 
all of the elements on the 
page that have a class 
attribute of fish. 


DOM version 
of the page 


Here you go. 


li 


li 


li 

/ 







ul class= 
"menu list" 


ul class= 
"menu list” 

1 


Z〆 / 《、 1 


ul class= 
'menu list' 



、 


、 


li 


li 


li 



〆 

， I 


、 、 


li class= 

li 

"fish" 





li 


The browser will hold those elements in memory temporarily. 
If we want to keep them to use in our program later, it’s a 
good idea to put them into a variable. But how do we do that? 
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special $friends 


There's that dollar sign again... 

Storing our elements is simple. We create a variable, just as we have for numbers and 
text strings, and set the variable (using the equals sign) to the statement that returns 
elements. But wouldn’t it be good to know when the variable is storing special stuff like 
elements (versus just numbers or text strings)? It’s common practice among jQuery 
coders to place a dollar sign in front of a variable that will be used to store elements 
returned from j Query. That way, anyone else who looks at our code knows that we are 
using the variable to store stuff that we got from j Query. 



( M .fish") .parent () .parent () .detach(); 


puttmg a dUlav Siy> m o( *thc 
variable mdidaics rt's 
vc*tuvir>cd -fv-om j<$ucvy. 



It is messy to store 
different elements 
in a variable. 

That’s why j Query uses 
JavaScript arrays to store 
elements. Let’s see what 
arrays are all about. 



li 


li class= 


li 


li 


▼'fish” 




li class= 

li 

n fish n 
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jquery web page manipulation 


Expand your storage options with arrays 

Any time we select elements from the DOM and store them in a 
variable, j Query returns the data as an array. An array is simply a 
variable with greater storage options. 


A basic variable 
stores one value. 


An 


array stores many values. 


TKc variable 


A ^ V 

TiiC ok 
vaviablc- 




The value rt’s s*to\r*m5- 



；at sU at 0. 


The array iiscl-f is vcally 
jus 七 a daia s*tvud*tuvc 七 “a 七 
ddv> hold multiple vaviablcs 
(like 七 his 七 es 七 - 七 ube iioldcv 
holds mu Itiflc *tcs*t tubes). 


K Q> 

\ \ 


The array 

\^> ^ 



$a[0] $a[1] 



J 





We can put stuff in and take things out of each storage slot. 
To put the value “15” into the third slot, we would write this: 

$a[2] = 15; 



The 七 hivd si 。 七 is v>umbcvcd 2- 
because s-tavtcd a*t 0. 



6ee} Bits 


Arrays don't have to start with a dollar sign 
($). The practice of indicating a jQuery array 
with a dollar sign is a coding convention of 
jQuery developers. 
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so tidy! 


Store elements m an array 

When we select and detach the li elements and set a variable ($f) to the 
result, jQuery takes the elements the DOM returns and stores them neatly 
for us in a JavaScript array. When we want to put those elements back with 
the restore button, our job will be way less messy. 


$f = $ ( M .fish") .parent () .parent() .detach(); 


jQuery takes tire 

elements tke DOM 
returns and stores 
tkem neatly ior 


us m 


an 


array, 



There’s a lot 
more to arrays. 

But you don’t 
need to worry 
about that too much right now. 

We’ll get into a bunch more detail 
on arrays in Chapter 6. 
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jquery web page manipulation 



Tesr DriVq 


Add the line of code on the previous page, which will detach the parents of the parents of 
the #f ish elements, inside the vegOn button click function in your my—scripts.js file. Then, 
open the page up in your favorite browser to make sure everything’s working. 


HBO 








Our Menu 



TWis is v/V^a*b >/c 

叫扣 七 ed. T\\t 《十 

av-c dc*taAcd. 


Dinner Entrees 


H raised Delight 

lomb shoulder cipolinni onions 
roasicd red grapes braising jus 


onions carrots boby turnip 


House Grilled Panin! 

piuscuuk) piuvolunc avucsidu chcny lunialooi 
sourdough roil shoestring tries 

House Slider 

mflrinfltod cggplnnt zucchini homhurger hnkomic 
vinoigrcoc onion carrocs Muld-grain roll gooc chccsc 

Southwest Slider 

whole chiles hamburger pcppcijack chccsc oniun c 
sliced avocado Multi-grain roll 


Frittata 


eggs asta^n, pmvolonc, and mmano chccsc% potatnc^ 


Soups and Sides 


('ocnnur Soup 
coconut 

Soup Du Jour 

grilled si 
bruili 

Hot and Sour Sen 
roasted p 
Rmih 

Sniffed Roked Fn 
potato 
chakJar 

AvuokJu Rulls 


Avo 

aucc 




You did it. Now let’s update the checklist. 


I I 1. Matdh li clemeh*ts c^f -the -fisK dlass a^d remove -those entrees -from the 

I I 2. li elements *m dldss dhd vcplade wi*th pov-tobcllo mushrooms. 

I I 3. li clcr«ch*b *m *thc mca*t dass a^d replace -them y/i-th *bo^u. 

Next up, you need to find entrees that contain hamburger and replace the 
hamburger with portobello mushrooms. 





We’ve seen how to take elements out of the DOM, but how do we 
dynamically replace DOM content with different content? 


you are here ► 


153 

















this for that 


Change out elements with rcpIaccWith 

The replaceWith method allows you to replace selected element(s) with new ones. 
Whenever you want modify the DOM by exchanging one thing for another, you can 
use this handy jQuery method. Let’s say we want to dynamically change the heading 
level 2 element that says “Our Menu” to a heading level 1 that says “My Menu.” 
Here’s how you can do it using the replaceWith method: 


all ih c hZ 


Reflate sclcd*tcd 




( M h2 M ) . replaceWith ( n <hl>My Menu</hl> ff ) 


參 





The JS interpreter matches 
the heading level 2 element... 


❺ 


..and replaces it with the contents of the 
stuff in the parentheses, updating the DOM 
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jquery web page manipulation 


How caw rcpIaceWith help? 

You need to match li elements in the hamburger class and replace 
them with an li element of the portobello class. Let’s think about 
that problem before we write our code. 


ul class= 

、 

ul class= 

"menu list’’ 

I T~his is what 

’’menu 一 list’' 


厂 This is what 
1/ 


li class 
'hamburger 




"the toAt 


lruhs. 


House Slider 



marinated cggplan/ zucchini (^hamburg^y balsamic 
vinaigrette onion / cairots Multi-gram roll goat chccsc 




T\s\s is 

should look l.kc aRcv 

i\\t CoAt v-uy\s. 


li class= 
'portobello" 


Southwest Slider — >v 

whole chiles j^hamburegy pcppcrjack chccsc onion carrots 
sliced avocado Muiti-grain roll 


House Slider __ 

marinated eggplant zucchini portobello Musk 


balsamic vinaigrette onion carrots Mulu-gram 
chccsc 


Southwest SMder 

whole chiles 


y oriobello MushroomJ pcppcrjack chccsc 


onion carrots sliced avocado Multi-grain roll 




Write the code that will find the li elements in the hamburger class and replace them 
with li elements in the portobello class. The diagram below should help you think it 
out. We wrote part of the answer for you. You do the rest. 



$ ( 


).replaceWith( 


<em>Portobello Mushroom</em> 
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exercise solution 


^€•1 鉍 

opi 


PLjiiipH 


Write the code that will find the li elements in the hamburger class and replace them 
with li elements in the portobello class. Here’s our solution. 



Select dll ih 

"the hambuvgcv- dass. 


丁 he w'C't^od dy 灼 "trades selected 

toyyityyi (or *tKc t\t^i *m *tKc pa^rc^Kcscs. T^c mam -to 

代 member is 栎 a*t yoiAG” f 託 t+TML m *tKc pavc^Kcscs. 


( w ha rwl>uv*3^r”） . replaceWith ( U <li dUss 二 tpo^rtolDcllo^XemsPortobello Mushroom</em></li>, 



Tesr DriVq 


Add the replaceWith code inside the vegOn button click function in 
your my—scriptsjs file. Then, open the page up in your favorite browser and 
press the “Go Vegetarian’’ button to make sure everything’s working. 




IF) FI 


|fc_B 


House Slider 

madnated eggplant zucchini ^Portobello Mushroom 
balsamie vinaigrette onion j carrots Multi-grain roll goat 

cht^sc povtobcllo musKvooms 

Southwest Slider ^ ^ avc v-cpiadcd Ir^buv^cv. 

whole chiles Portobello Mushroom pcppcrjack chccsc 
onion carrots sliced avocado Multi-grain roll 
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jquery web page manipulation 


Thiwk ahead before using replaceWith 

What’s next on the checklist? 

li -fish dldss dhd remove -those errbries -from *thc mc^u. 

li eler^errts m *the hamburger dldss a^d replace y/i*th po\rtobcllo mushrooms. 

Ma*tdh li elements *m -the r^ca-t dlass a^d replace wi*th *to^u. 

You need to find entrees in the meat class and replace them with tofu. 


0 " 1 - 
□" 2 . 
□ 3. 




Actually, we can’t use replaceWith 

for this one. 


ul class= 

’’menu 一 list’’ 

■ - 






jQuery’s replaceWith method is straightforward 
and powerful, but unfortunately, it won’t help us 
solve this one. Why not? 
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not quite one for all 


replaccWith doesn't work for every situation 


The replaceWith method works well when you 
have a one-to-one replacement like exchanging the 
hamburger class for portbello class. 


One-to-one substitution 



Owe - to - 晰 any substitution 

But the scenario of trading out elements for 
the next item on our checklist isn’t one for 
one. We have to replace many different kinds 
of ingredients (i.e. ， turkey, eggs, steak, lamb 
chops) with one ingredient (tofu). 


One-to-many substitution 



tms 

,h the meat ^lass 

扣 d -them all 

with -tcHpu. 


Many - to - one substitution 

But when we want to select tofu and replace 
it later, we have a problem. When we want 
to put the different kinds of meat back in, 
the DOM has forgotten about them. 

We could replace tofu with just one of 
the types of meat, but that’s not what we 
wanted at all. 

So we’ll need to accomplish this menu 
substitution in two steps: 


Many-to-one substitution 














La*tcv- oy \ } 七 he 

P_ 

all 


’s 


c\rcw*b 










o 

❺ 


Insert li elements of the 
tofu class into the DOM 
after the meat elements. 

Detach the elements of 
the meat class and hold 
them in a variable. 
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jquery web page manipulation 


Iwscrt HTML cowtcwt iwto the POM 

Up to this point, we’ve either removed or replaced elements in the DOM. 
Fortunately for us, the creators of the jQuery library gave us many ways to 
insert stuff into the DOM. The ones we’ll look at are before and after. 

before inserts content before the selected element. 

$ (’▼.meat") .before ( n <li>Tofu</li>"); 





after inserts content after the selected element. 

$(".meat"). after ( n <li>Tofu</1i>"); 





i^harpen your pencil 


Write the jQuery code that will accomplish each step to our solution. 



Insert li elements of the 
tofu class into the DOM 
after the meat elements. 



Detach the elements of 
the meat class and hold 
them in a variable. 
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Write the iQuery code that will accomplish each step to our solution. 


o Insert li elements of the 
tofu class into the DOM 
after the meat elements. 

❺ Detach the elements of 
the meat class and hold 
them in a variable. 




5 % 


$ 


( u .mea*t w ).drtadhO; 


You’ve accomplished each of the steps for the “Go Vegetarian” button: 


1. li clcr«Ch*ts -fish dbss ^Y\d \rcnr\ovc -those errbries -from *the r«cr\u. 


2. li m *thc hambur^cv- dldss ar\d replace wi*th po\rtobcllo naushrooms. 

3. Ma*tdh li eler^errts m mca*t dass ar\d replace wi*th -to-fu. 


Up next, we need to build the “Restore Menu” button. Here’s what that button needs to do. 


Put the fish entrees back into the menu where we removed 
them (i.e., before the first menu item in the left column). 

Find entrees that contain portobello mushrooms and 
replace them with hamburger. 

Find entrees that contain tofu and replace them with the 
different kinds of meat (in the right order). 


Let’s dig right in and look at what we need to do for the first one. 


Wc v\ttd bo veatta 乩七 (\s\\ 
*to 七 his 


■♦.be-Po\re 七 he 

-Piv-s-t 匕 hi Id. 


div class: 



We know how to use before, but how do we specify the first child? 


sharpen solution 


0 l 

encJ 

our 
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jquery web page manipulation 


Use filter methods to narrow your selections (Part 1) 


Fortunately, jQuery provides filtering methods that let us narrow our 
selection for problems like finding the first child. Let’s look at six of 
them (three on this page, three on the next). 


first 

The first method will filter 

out everything but the first element in a 
selected set of elements. 


eq 

The eq method will filter out 
everything but the element whose index 
number is equal to what you put in 
the parentheses in a selected set 
of elements. 


last 

The last method will filter out 

everything but the last element in a 
selected set of elements. 


Let’s look at one item from our menu to 



li 


TV c<\ me 七 W — do^ 
七 he sclented *to 

\ u st i\\c elemeyrt ^osc mdc* 
'is m 


li class: 
"meat" 


0 


ul class= 
'menu list' 



li 


li 


li 


li 


( n . menu—list’▼) • children () . eq(0) ; 

$ ( " . menu—list’▼) • children () . eq (1); 

$ ( n . menu—list’▼) • children () . eq (2) ; 

$ ( n . menu—list’▼) • children () . eq (3) ; 

$(".menu list n ) .children() . eq(4) 




ouv St\tcitd clcmcyrb *m 

a 叫 .TV 

Wm ^ C' wctW veWs -to 
•，- b slot *m array 
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narrowing things down 


Use filter methods to narrow your selections (Part 1) 


Now let’s check out the slice, filter, and not methods, and how they work. 


slice 

The slice method will filter out 
everything but elements with an index 
between the index numbers you put in its 
parentheses. 


filter 

The filter method will filter 
out everything but elements that 
match the selector you put in its 
parentheses. 


not 

The not method will filter out 
everything that does not match the 
selector you place in the parentheses. 


sli 匕 e method hav-vows dowh 

elc^is {o those 
bctwcch the -two ihdex humbevs 
you put m pwtheses. 



O 




(".menu list n ) .children() . slice (1,3); 




The filter and not methods let us use selectors to create a subset 
from the matched set using selectors as arguments of their methods. 


The -f atev- ^awov/s 栋 c 

sclera cl ⑽山伤如 you 

七 m 仪 s. 


(".menu_list") .parents () . filter(".organic") 



TV,c 於七 .ctWs v/ovk ycat ^ 

栋 c a^a tW.ia^ mctWs. 

The pavchts method lets us yab 

all ihe clcr^chts that av-c pav-chts, 
9^hdpa\rchts, girca-t-gv-ahdpav-chts, 
ot the selected clcmcht 



li class: 
"local" 



ul class= 
’’organic’’ 


1 

li 



ul class= 
'menu list organic' 



li class: 
n local ，， 




( n ul.menu_list.organic").children().not(".local 

The no 七 method ^avvov/s dovm 七 he sded^ted 
elements -to -those -tha-t do maidh 七 he 
sclcd-to\r you pu*t \v\ pairc^-thcscs. 


Which of these methods will help you specify the first child on the menu? 
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jquery web page manipulation 



BE .DQH 

Your job is to play tire DOM. Draw a line from the jQiiery 
Statement to the element(s) in the DOM the selector will 
return. Assume that these are the only elements on the 

pa^e. Wve done the first one for you. 



( n .left col") .children() .not( n h4") 


(".menu list") .parent () •slice (1,3); 


(’▼•menu list n ) .parents () . filter ( n div n ) 



ul class= 
'menu list' 


ul class= 
'menu list' 


ul class= 
'menu list' 


( n li n ) .first (); 


L 


L 


S 向向 向四 向向向回 


(’ ▼•menu—list li n ) . eq (3) ; $ ( n . menu list’▼)• children ()• last () 


^harpen your pencil 


Write the line of jQuery code that will put the fish entrees back into the menu 
where we removed them (i.e., before the first menu item below menu entrees. 


.before($f); 
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be the DOM solution 


BE §©lug©ti 

Your job is to play tire DOM. Draw a line from the jQ^uery 
Statement to the element(s) in the DOM the selector will 
return. Assume that these are the only elements on the 

pa^e. Wve done the first one for you. 



body 


"div class= 
'menu wrapper 


tdiv class: 
left col' 


( n .left col").children().not("h4"); 


( n .menu list n ) .parent () •slice (1,3); 


h4 


(’ ▼•menu list n ) .parents() .filter("div") 


ul class= 
’!menu entrees' 



li 


li | 


li J 


ul class= 
menu list' 



ul class= 
"menu list’’ 


ul class= 
▼’menu list’’ 


$( n li n ) . first (); 


li 


li 


li 


(’ ▼•menu list li" ) . eq (3); 



回 s 



li 



(".menu list n ) . children () . 1 ast:(); 


i^harpen your pencil 


Write the line of jQuery code that will put the fish entrees back into the menu 
where we removed them (i.e., before the first menu item below menu_entrees. 

eyrbrees Ii”).*fi\rs*t0 .before ($f); 
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jquery web page manipulation 


Prmg the burger back 

So far for the “Restore Menu” requirement, we’ve got one 
item down, two to go: 



Put the fish entrees back into the menu where we removed 
them (i.e., before the first menu item in the left column). 

Find entrees that contain portobello mushrooms and 
replace them with hamburger. 


Find entrees that contain tofu and replace them with the 
different kinds of meat (in the right order). 


Our next checklist item seems a bit like deja vu, doesn’t it? All we really 
need to do is reverse what we did for the original substitution. Why? 
Because we’re dealing with a one-to-one substitution, and we love 
one-to-one substitutions because they’re logically simple. 



One-to-one substitution 



Remember this exercise? We’re going to flip it. Write the code that will find the li elements in the 
portobello class and replace them with li elements in the hamburger class. The diagram 
below should help you think it out. We wrote part of the answer for you—you've got the rest. 


The todt you 

Wirite hcv-c... 




\ 



$( 


).replaceWith( 


Hamburger 
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exercise solution 


Qpi 


PLjiiipH 


replacewith brings it all back in one swift move. Nicely done! 




Sele 匕七 all clcmchis ih 

the pov-tobcllo class. 丁 “ e 代 pla 匕 d/Vith method dynamically tvadcs -the 

I selected dewteh 七 -Pov- 七 he clc^c^i m 七 he pav-c^-thcscs. 

i/ 广 ^ - - -- ^ 

$ ( u .por*bobdlo W ) - replacewith ( u <|*, ^lass^hambur^cr > Hambur g er </li> W )； 


Where's the beef (cr...meat)? 

We’re down to our last item for the “Restore Menu” button: 



Put the fish entrees back into the menu where we removed 
them (i.e.，before the first menu item in the left column). 

Find entrees that contain portobello mushrooms and 
replace them with hamburger. 


Find entrees that contain tofu and replace them with the 
different kinds of meat (in the right order). 

What did we do with those li . meat elements again? Let’s review: 


We put li . tofu elements into the DOM after the meat elements. 

$ ( n . meat▼▼) . after ( M <li class= 1 tofu 1 ><em>Tofu</em></li> n ); 


Then, we detached the li . meat elements but held on to them by saving them into $m. 

$m = $( n .meat").detach(); 


So where are those elements, and how do we bring them back? 
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jquery web page manipulation 


dcmCht... 


./is s*tov"ed d slot 

IK\ "trV^C* • - 


s 


frw a\r\ray. 





mr \ 


$m[3]^ $m[4] : l$m[5]j 







You need to put each li .meat element back in for each 

li • tofu element. You’ve seen many methods that put elements 

into the DOM. Which method would you use for this one? 


A meaty array 

Remember that whenever we store j Query elements, we give the variable a 
dollar sign to signify that the variable we’re using has a special kind of storage. 
In this case, it’s a j Query array, and here’s how the elements in $m are stored: 



<TT/VS^PTq3 
< =+J(da)m==ss(dHo-HT> 


o- 



<TT/VOT-p4J3ssd 

八， • 扣 SUI==SST3 ttv 
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the return of each 


The each method loops through arrays 


In Chapter 3, you saw how to use the each method to loop through elements. We 
can use it again here to loop through all the meat elements in the $m array and 
put them back where they were. But to do that, we’ll need to check out a bit more 
about how the each method works. 


Tke eack metkoct is 
like an assemtly- 
line mackine lor 
your elements. 

T\st tacM 5 Wcs 

It lets 

you Y/ov*k ov\ oy\C clcwci^-b ^ 

av-v-ay a*b a 



I/Ve add v-cal powcv* whch wc put 
a ihsidc o-f eadk The 

-Puhdtioh lets us do something -to 
cadh Ss i^s pirodcsscd- 


The tWis keyv/ord 
*to clcw'Cl^t 
-fuhttio^s y/ov-k'm^ ov\> 


㈣::㈣ 工 

» s ^ovkm^ ov\. 


0 



J 









W\\tY\ wc select OUV- 
patayafV) element 
j^uev-y s-tov-cs y/)ia*t wc 

sclcdtcd a\rv"ay* 


f(this) is how you tell 
七 ^ *Puh 匕 ti 0h about thi 
elcmeivt -that is beiha 

pv*o 匕 essed. 


The eddii method pv-odcsscs i\\t 
clcrwcy>is *m *tV>C avvay or\t by oy>c 
ay>d does somc*th*m^ *to catV> oy>C. 



The viable i sia^is ai o a^d 

f ^ OUhts ^ as that 

clcmch-t is pvo 匕 essed. 

W —— 


$ ( fT . tofu 11 ) . each (function (i) { 


^ $ (this) .after( 


}) 



|/VcVc vismj i\\t a-f*tcv- method V^cv-c, 
W*t you 6 扣 use a 吖 j^ucrv w>c*t^od 
{jo do stuW *to ^ array o? elemerrb. 



We want to put meat elements in 
for each li. tofu element. 

So what should we put in here? 
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jquery web page manipulation 



jQueiy Magnets 

Put back the code magnets in the proper order to get the restoreMenu 
button finished and working. We put in a few for you. 


$("button#restoreMe").click(function(){ 


if (v :: true){ 


v : false; 
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jquery magnets solution 



jQueiy Magnets Solution 

Put back the code magnets in the proper order to get the restoreMenu 
button finished and working. We put in a few for you. 



<li class=I hamburger'>Hamburger</li> M ) 


$( n .menu entrees li M ) .first() J 

| .before ($f); | 

$(".tofu").each( function(i){ 





V 

7 false; | 

u 



VVe pu 七 batk meat elements 

by away a ”》 

elements i\\t IS y/orkmj on. 


ED 



my—scripts.js 


170 Chapter 4 













































jquery web page manipulation 


Thafs it … right? 

You did everything required for the “Restore Menu” button. 
Let’s update our files and call this project done. 



0 ^ 


Put the fish entrees back into the menu where we removed 
them (i.e., before the first menu item in the left column). 

Find entrees that contain portobello mushrooms and 
replace them with hamburger. 

Find entrees that contain tofu and replace them with the 
different kinds of meat (in the right order). 



p.s. l-f you 63, ^ ^ ^ ，A ? ,so ,，kc i ^ ^ ^ 

U\> Y\t^i *to subst»*bu*bcd 


Oops, you’re right. 

Luckily, the web designer already put the veg_leaf class in the my—style.css 
file. Let’s have a look at it. 


veg—leaf{ 

list-style-image : url('../images/leaf.png'); 




my—style.css 


Write the statement that will add the veg—leaf class to the parent of the 
parent of the tofu classes. 


si ssepppe : 干…七 
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exercise solution 



Just a little DOM transversing, plus some addciass magic, and 
you’re done! 

f0\to^u0.parcr\t().pareh*t0.addClass( w vcg L _lca-f ; 0; 


I get the other filter methods, but 
slice still confuses the heck out of 
me. Can you give me a more in-depth 
explanation of it? 

The slice method can be confusing. 
The most confusing thing about slice are 
its parameters: slice (start, end) _ 

The first parameter is the start parameter, 
and you have to include it, or slice won’t 
work. The start parameter tells where 
to start the selection within an array of 
elements. Remember that the first element 
in an array has a “zero index,” which means 
you have to start counting at 0. The start 
parameter will also take a negative number. 

If you put in a negative number, slice will 
start counting backward from the end of the 
array rather than forward from the beginning. 

OK, so what does the end 
parameter of the slice method do? 

The slice method's second 
parameter, the end parameter, is not required. 
If you don’t include it, slice will select all 
elements from whatever the start parameter 
is set to and will select all of the elements in 
the array that are greater than the start 
parameter. The end parameter can be 
counterintuitive if you don’t remind yourself that 
the array starts counting at 0. 


_ thereiare no o 

一 Dumb Questi9ns 

The each method seems pretty 
powerful. How does each know what 
element it’s working on? 

The real power comes from combining 
each with the this keyword. The each 
method keeps track of its index automatically 
and “knows” which element it's working on. 
You should only use each when you’ve 
selected multiple elements. To reference the 
current element, you use this but wrap it 
with the jQuery shortcut: $ (this). 

Why do I have to put the “i” or 
“index” inside the each function? 

A: The index variable, often called “i” or 
“index,” is used by the each function to keep a 
count of the element each is working on. That 
way, the each function knows when it’s done 
processing. If each didn’t have an index 
variable, it wouldn’t know which function to 
work on and it wouldn’t be able to stop. 

How can I find elements within a 
jQuery array? 

You can find elements within a jQuery 
array using the find method. Let’s say you 
have an array of li elements in a jQuery array: 

var $my_elements = $ ( "1i M ); 

Now, you want to find all of the anchor 
elements in that array. Here's what you do: 

$my_elements.find( n a"); 


Does jQuery give us a way to wrap 
an element inside of another element? 

Indeed, it does. Let’s say you want to 
surround an image with an ID of oreilly 
inside of an anchor element. Here’s how you 
do it: 

$("img#oreilly").wrap("<a 
href = 1 http :// www.oreilly. 
com'></a>"); 
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jquery web page manipulation 



Tqst DriVQ 


It’s been a while since you updated your files. Add the code for the “Restore Menu” 
button and the code for adding and removing the veg_leaf class where you 
make vegetarian substitutions. You can always download the files for this chapter 
from http:/ / www.thinkjquery.com/chapter04 / and compare them to your code. 


0OO 


a 


Q 7 


Our Menu 


’Go Vegetarian) ’ Restore Menu 


Here’s 如 Ica^ 

added 


Dinner Entrees 


Braised Delight 

Tofu cipolinni onions carrots baby turnip roasted 
red grapes braising jus 

House Grilled Panini 

Tofu provolonc avocado cherry tomatoes 
sourdough roll shoestring fries 

House Slider 

marinated eggplant zucchini Portobello Mushroom 
balsamic vinaigrette onion carrots Multi-grain roll 
goat chccsc 

Southwest Slider 

whole chiles Portobello Mushroom pcppcijack chccsc 

rocado Multi-grain roll 



This is great! Our customers love the 
new web menu, and the best thing is 
that we no longer have to maintain two 
different menus. Ifs all on one page! 


Soups and Sides 


Coconut Soup 

coconut milk Tofu vegetable broth 
Soup Du Jour 

Tofu mushrooms seasonal vegetables vegetable 
broth 

Hot and Sour Soup 

Tofu carrots Chinese mushrooms chili vegetable 
Broth 

Stuffed Baked Potato 

potato Tofu seasonal veggies chcddar & jack chccsc 
creamy alfrcdo sauce 

Avocado Rolls 

Avocado Whole chiles Sweet red peppers Ginccr 






or\ took'm^ uf some ^ 

够中 5 afeou 七侁 c Y/cbsVtc. 
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your jquery toolbox 



Your jftuery Toolbox 

You’ve got Chapter 4 under your 
belt and now you’ve added DOM 
manipulation and traversal ， arrays ， 
and filters to your toolbox. 


t) 0 M 一 、— a 七 ' ovx 

V u， ' , > atC) ar>d 

V>eW 




POM -traversal 

TW»s *»s all about 乩丄吒 
{y t POM -tree so 70 U cars 

You use 如 ⑼ t f 

assodiatcd mctKods l*»kc \>a 州七 

a^d ^\\A bo 70 U 

CV>amm5 mrtWs I 心 

叫 to traverse VOM r^'V* 


(d fc\^ so ^ 

—f 一以一 
f 工 s 一 ，” 


F“ic\rs 

:“ 七饮 ^ihods help v 

d 〜 w w SC JJJ U h 〜 

Usi d C， ^ h： 


qua/ 

las£ 

slice 

的。七 


m I 
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jQuery effects 恥 d 恥 ! GiatlPH 

% 


A little glide in your stride ^ 




Look at how well I can move 
around; rm so graceful. I 
bet you can’t do that! 


Making things happen on your page is all well and good, 

but if you can’t make it look cool, people won't want to use your site. That’s 
where jQuery effects and animation come in. In this chapter, you’ll learn how to 
make elements transition on your page over time, show or hide specific pieces 
of elements that are relevant, and shrink or grow an element on the page, all 
before your users’ eyes. You’ll also see how to schedule these animations so they 
happen at various intervals to give your page a very dynamic appearance. 


this is a new chapter 
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passing on flash 


PoodleS 切 ff needs a web app 

DoodleStuff supplies Webville kids with cool art supplies. A few years ago, 
DoodleStuff started up a popular website that provides interactive art apps for 
kids. The company’s fan base has grown so fast that it has trouble keeping up 
with requests. 

To cater to DoodleStuff’s new, wider audience, the web projects director wants 
to build an app that doesn’t use Flash or any other browser plug-ins. 




x 〜 


& 


参 



Our kids* projects are all about 
making things fun and being hands on. 
Can you build us an app for our 6 - to 10- 
year age group? We need a lot of visual 
effects and some interactivity on this 
one. But no Flash, please! 
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jquery effects and animation 


Vo the Mowstcr Mashup 

Here’s the project blueprint from the web projects director, along with the 
graphic designer’s files for the app. 



Monster Mashup Project 

The Monster Mashup application is intended to entertain children in the target age group by allowing them to “mash up’ 
their own monster head by mixing 10 different heads, eyes, noses, and mouths. The transitions between the monster 
face parts should be animated. 


User Interface 
Container 


Frame 


Head Area 

Click to advance monster head. 


Eyes Area 

Click to advance monster eyes. 

Nose Area 

Click to advance monster nose. 

Mouth Area 

Click to advance monster mouth. 


img- 

lightningl 

img- 

Iightning2 

img- 

Iightning3 


After nine clicks, each strip should 
“rewind” to the beginning. 


Animation 

A mockup of how a monster face part should change. 


A mockup of how the lightning animations should look. 


The lightning images should fade in and then out 
quickly, as if they are flashing. 


Graphic Files 

frame.png 
width: 545 pixels 
height: 629pixels 


headsstrip.png width: 3670 pixels, height: 172 




eyessstrip.png width: 3670 pixels, height: 79 pixels 


nosessstrip.png width: 3670 pixels, height: 86 pixels 

ST ， 嫌 ? H 




mouthsstrip.png width: 3670 pixels, height: 117 pixels 




'sstrip.png 

wTSfT 




lightning_01.jpg 


2 pixels 


lightning_02.jpg 


lightning_03.jpg 


You have a lot of detail on the project requirements and the graphic files you need, 
but the graphic designer didn’t write any HTML or CSS — that’s where you’ll need 
to get started. What do you need to do to set that up? 
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laying a good foundation 


Mowstcr Mashup needs layout and positioning 


We’ve certainly had a lot to say about getting your structure and style right out of the gate 
before you write any jQuery. And it’s even more important now — if you don’t get your 
layout and position right up front, your effects and animations can go wrong , 如乙 There’s 
nothing worse than staring at your j Query code and wondering why it’s not doing what you 
want it to do in the browser. It’s a good idea to sketch up your ideas and think about what’s 
going to happen on screen. 



This should be a dw 
七 ha 七 ’s 5 十 5 pixels Vide …二 f : v pixels 

io ua W. o( 

■Che r^ohstev s 匕 e. 



TV^c mons 七 ev’s 
-fate 

u\> o*f -fouv- n\orC 
dWs *to hold caA 
七 he 
sbr\Y s ' 


div 养 pid 一 bo 乂 


div#-fv-a 


me 


i-at\\ mossier imay S*brif IS VHO 
pixels W\dt, bu*t >wc da 朽 only sho>w 

fi'x.cls a*t a tirwc- 

1/Vha 七 CSS atbribu 七 e Will 
allo>M us b> do 七 ha 七？ 


pixels y/idc 



div#hcad 


dw 养 eyes 


div^^osc 


div^mou*th 


I7Z pixels \\\o^\ 


l°i pixels 
併 pixels hijh 
Il7pi>ccls high 


Pladc the ir^age stHps usih 9 img clevis ^sied 

二::=以 3 
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jquery effects and animation 



Esc^ufi 鉍 


For each blank line in the HTML and CSS files, write in the CSS ID, property, or setting that 
will help lay out and position the Monster Mashup app. When in doubt, look at the previous two 
pages for guidance. We’ve done a few for you. 



body> 

〈header id= M top"><img src="images/Monster_Mashup.png" / > 

<p>Make your own monster face by clicking on the picture.</p></header> 


<div id= M frame M > ” 

<div 一 1? 外..〉 


<div id=.class= M f ace"ximg src= M images/headsstrip . jpg"></div> 

<div id=.class= M f ace"ximg src= M images/eyesstrip • jpg M ></div> 

<div id=.class= M f ace"ximg src= M images/nosesstrip . jpg"></div> 

<div id=.class= M f ace"ximg src= M images/mouthsstrip . j pg"></div> 

</div> 

</div> 


<script type= M text/javascript 
<script type= M text/j avascript 
</body> 


src="scripts/jquery-1.6.2.min.j s"></script> 
src="scripts/my scripts.j s"></script> 





index.html 



#frame { 

position : . 

left : lOOpx; 
top : lOOpx; 
width : 545px; 
height : 62 9px; 

background-image : url(images/frame.png) 
z-index: 2; 
overflow : 

} . 

#pic_box{ 

position : v-clative ； 

left : 91px; 
top : 84px; 

height : 4 60px; 
z-index: 1; 
overflow : _ 

} 


.face{ 

position :… 
left : Opx; 
top : Opx; 
z-index : 0; 


#head{ 

} 

#eyes{ 

} 

#nose{ 

} 

#mouth{ 






my—style.css 
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exercise solution 



For each blank line in the HTML and CSS files, write in the CSS ID, property, or setting that 
will help lay out and position the Monster Mashup app. When in doubt, look at the previous two 
pages for guidance. We’ve done a few for you. 



body> 

〈header id= M top"ximg src="images/Monster_Mashup .png" / > 

<p>Make your own monster face by clicking on the picture.</p></header> 


<div id=" frame "> ,, 

<div i d= > 

<div id=.. u lucad W . 


<div id 二 


u 


)) 


.. .eves. . 

.n ■ ■ , W 1 )) 

<div id=...^ose. ; 

<div id'.VttidLh:.. class 


class= 

"face' 

'ximg 

sre 

class= 

"face' 

'ximg 

sre 

class= 

"face' 

'ximg 

sre 

class= 

"face' 

'ximg 

sre 


'images/headsstrip.jpg"></div> 
▼images/eyesstrip.jpg M ></div> 
'images/nosesstrip.jpg"></div> 
'images/mouthsstrip . jpg"x/div> 

</div> 

</div> 

<script type="text/javascript 
<script type= n text/javascript 
</body> 


sre: 

src ： 


scripts/jquery-1.6.2.min.j s M ></script> 
scripts/my scripts.j s"></script> 



index.html 



#frame { 

position : dbsolu*bcj 

left : lOOpx; 
top : lOOpx; 
width : 545px; 
height : 62 9px; 

background-image:url(images/frame.png) 
z-index: 2; 


face 


y/C animate the , 丄 . 

position elects, wc ^ position： rdat，VC； 

，eed h> use absolute o, ； eft *° pX； 

^dative pos.t ， ohm 9 . z-index: 0; 


overflow : hidden; 


#pic_box{ 

position : \rcla*tivc ； 

left : 91px; 
top : 84px; 

height : 4 60px; 
z-index: 1; 
overflow : hidden 



way 如？七 ^ 七 c ^ ds 
b— 七 ^ avea. 


^/o\a £>ould dl SO 

use *tV)C CSS w dlip 

fv-opcv"*ty *fo\r 


#head{ 


#eyes{ 


#nose{ 

} 

#mouth{ 






my—style.css 
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jquery effects and animation 


<div id= M container n > 

<img class="lightning" id= M lightningl M src="images/lightning-01.jpg" 
<img class="lightning" id= n lightning2 M src="images/lightning-02.jpg" 
<img class="lightning" id="lightning3 M src="images/lightning-03.jpg" 


A little more structure and style 


Next up are the structural changes to the HTML and CSS files. Add the code 
below to your index.html and my—style.css files. You can grab the image files 
from www.thinkjquery.com/chapter05. 



- 广 dd a ^oh-taihcir the 

Mhthihg images ihsidc o( ii 



Da this! 


<div id= M frame"> 

<div id="pic_box n > 

<div id= n head" class="face"ximg src="images/headsstrip.jpg M ></div> 

class = "face"><img src= n images/eyesstrip.jpg"></div> 
class="face"><img src="images/nosesstrip.jpg M ></div> 
class= M f ace"ximg src= M images/mouthsstrip . jpg M ></div> 


<div id="eyes" 
<div id= n nose" 
<div id= M mouth' 
</div> 


</div> 

</div> 



index.html 


#container{ 

position : absolute; 

z-index: 0; ⑽ to sia^i out 

j 3s ihvisible. 

.lightning{ 

display : none 
position : absolute 


left:Opx; 
top : Opx; 
z-index : 0; 


+ 

v/ar\*t *to animate 

elements, wc 

position f\ropc\rty sc*t *to 

absolute, o\r v-clatwc. 


body{ 

background-color : #000000; 

} 

P{ 

color : #33FF66; 

font-family : Tahoma, Verdana, Arial, 
Helvetica, sans-serif; 

font-size : 12px; 

} 

#text_top { 

position : relative; 
z-index : 4; 



my—style.css 


/>/>/> 
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yoi/Ve a clicking expert by now 


Make the interface click 

Now that we have the Monster Mashup laid out visually ， let’s set up the 
rest of the user interface section called for in the blueprint. This part is 
all about clicking to make stuff happen, and you’ve done that for four 
chapters now. Setting this up should be a cake walk. 


User Interface 


^ ^ h^s io 
^ io 〜 e 



Container 

Frame 


Head Area 

Click to advance monster head. 


Eyes Area 

卜 dlick to advance monster eyes. 

Nose Area 

^ Click to advance monster nose. 

Mouth Area 

■ Click to advance monster mouth. 


img- 

lightningl 

img- 

Iightning2 

img- 

Iightning3 


*to 

七 vadk J eaA dU so 
減7。“办 v-cWmd 
way sW. 




After nine clicks, each strip should 
“rewind” to the beginning. 


tJiereiare no o 

Dumb Questi9ns 


I’m a little rusty on CSS positioning. 
Why do we need it for jQuery effects and 
animation? 

position is a CSS property that 
controls how and where elements are 
placed by the browser’s layout engine. jQuery 
accomplishes many of its effects using the CSS 
position property. If you’re rusty and need 
a refresher, check out this excellent explanation 
at Mozilla’s developer's center: 

http://developer.mozilla.org/en/CSS/ 
position#Relative _j)ositioning 


Why do we have to set the CSS 
position property to absolute, fixed, 
or relative when we want to animate 
elements ? 

If we leave the CSS position 
property set to its default setting (i.e., 
static), then we can’t apply top,right, left, 
or bottom positioning. When we get to the 
animate function, we’ll need to be able 
to set those positions, and static simply 
doesn’t allow for that. The other position 
settings — absolute, fixed, and 
relative — do. 


You mentioned a browser layout 
engine. What the heck is that? 

The browser layout engine is the 
core part of a browser that interprets the 
HTML and CSS code and displays it in the 
browser’s viewport (the window that displays 
content to the viewer). Google’s Chrome 
and Apple’s Safari use the Webkit browser 
layout engine. Firefox uses the Gecko layout 
engine, and Microsoft Internet Explorer use 
a layout engine called Trident. 
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jquery effects and animation 


jQueiy Magnets 

Put the code magnets in proper order to make the div#head element 
clickable. Make sure to sequence the variables and conditional statements in 
the right order so that you can detect the ninth click. 



㈣ 





headclix 






$(document).ready(function(){ 




var headclix 


$("#head M ).click(function(){ 
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jquery magnets solution 



jQueiy Magnets Solution 

Put the code magnets in proper order to make the div#head element 
clickable. Make sure to sequence the variables and conditional statements in 
the right order so that you can detect the ninth click. 


$(document).ready(function() 



$( M #head n )•click(function() 

{ 1 


if (headclix 

— 




You star 七从 c variable at 0 because 

bccir\ ticked yet 


J h,S ^ditiohal Ui-ts 
the usc^r {o hihe di^lc 


s. 


l-f iicadidri% is 
yeatev" *tV^a^ or 
c<\ual to % do 




• 

4 

else 



+= l ； I 

-- 





ttcvVs whcv-c you II eventually 
fu*t youv a 灼灼 todt- 

Se 七七 V)caddr»% variable -to 
y/)ia*tcvc\r i*t >/as bc-fo\rc flus or\C. 


whc\rc you'll cvch-tuoilly pu-t the 
仏 de "to \rcwihd the image stv-ip. 


I headclix Jj | : 0 ; | 

□ 


Reset the headclix viable 

"to O aficr the hihth di 乙 k. 


^ 1 J 







Could we reuse this code somehow to 
make the other elements clickable? 


Absolutely! 

Each of the elements follows a 
similar pattern to the div#head 
element (with a few variations in 
things like the variable name). 
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jquery effects and animation 


%|harpen your pencil 

Fill in the jQuer 


the jQuery script below to make the eyes, nose, and mouth elements clickable. 
We’ll add some functionality to each click in a bit. Make sure to sequence the variables 
and conditional statements in the right order so that you can detect the ninth click. 


(document).ready(function() 


$( n #head") .click(function () { 
if (headclix < 9){ 

headclix += 1; 


else { 

headclix = 0; 



})； 


my—scripts.js 
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sharpen solution 


i^^irpen your pencil 


You’ve made the eyes, nose, and mouth elements clickable by sequencing the 
variables and conditional statements in the right order so that you can detect 
the ninth click. 


(document).ready(function(){ 

va\r hcaddli% =■ Of hoscdli%=- Of mouthdix 二 O; 

N 


}); 


( M #head").click(function() 
if (headclix < 9){ 

headclix += 1; 

} 

else { 

headclix = 0; 

} 


})； 


i-f (cyedli% < 

cycdli% +=• I; 


t 


lsc{ 




} 


cyedli% =■ O) 


$ 


( u ^hose ，； ) dlidk(-fuhd*tiohO { 
i-f (hosedli% < 

hosedix + =■ I; 


}); 


clsc{ 

} 


妁 ose 匕 li>c 二 O; 


$ 


养 mou*th”).didk(*fuhd*tior\0 { 
i-f (r^ou*thdi% < 

mou*thdix + 二 I; 


}); 


clse{ 

} 


mou*thdix 二 O; 


、d set 


\Afe 6 孙 Att\^rt a^a sc ' 






Eadh pairt o( the rwohstev- -fade 
IS hov, 乙 linkable dhd is set up 
"to allow Ohly hihC dicks b^fov^ 
V"Cv/ihdih0 "tKc s^vip 

Koti^-C hoy/ 

ms'idc -tV^c t\\ck is stv-^tuv-cd 

m d sim'ildV" y/ay with mmov- 

V3V"ia*tio\r\S? TV^iS be 3 

aood ^dse -fo\r \rcusc. 

\ 

Pahcuc, girasshoppcv-wcll 

ih Chaptcv 7. 



my—scripts.js 
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jquery effects and animation 


Make the lightnmg effect 

Next up is the lightning effect. Let’s review what the blueprint calls for before 
trying to make the effect work. 



User Interface 


A mockup of how the lightning animations should look. 


The lightning images should fade in and then out 
quickly, as if they are flashing. 


丁 he ligh-thihg images av-c 

jested Ih the ^Oh-taihcv div... 


...ar^d 

images need *to -tsdc 
m ou't ^uidkly- 


Potentially. But there might 
be a better way. 

We looked at jQuery^ out-of-the-box 
effects in Chapter 1, but let’s dig in a 
little more. 


Container 


img- 

lightningl 


Frame 


Head Area 

Click to advance monster head 


img- 

Iightning2 


img- 

Iightning3 


Eyes Area 

Click to advance monster eyes 


Nose Area 

Click to advance monster nose 


Mouth Area 

Click to advance monster mouth 


We did something kinda 
similar in Chapter 1 with slides and 
fades. CarVt we just use those to 
make the Monster Mashup work? 
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property prestidigitation 


How does jClucry animate dements? 

When the browser loads a CSS file, it sets the visual properties 
of the elements on the page. Using jQuery’s built-in effects, the 
JS interpreter changes those CSS properties and animates the 
change right before your eyes. But it’s not magic. • .it’s all about CSS 
properties. Let’s look again at a few you’ve already seen. 


hide, show, and toggle change the CSS display property 


hide 



show 


toggle 




The JS interpreter changes the 
CSS display property of the 
selected element to none and 
removes it from the layout. 


The JS interpreter changes 
the CSS display property 
of the selected element so 
that it becomes visible. 


If an element is hidden, the 
JS interpreter will show it, 
and vice versa. 


jQuery elfects ckange CSS properties on tke lly，making 
tke page ckangfe rigfkt teiore your users ， eyes. 



hide, show, and toggle are all about the display property. 
But we need to slide the face parts around and fade the 
lightning in and out this time around. What CSS properties do 
you think jQuery changes with fades and slides? 
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jquery effects and animation 


Fade effects animate the CSS opacity property 

fadeln 



With fadeln, the JavaScript interpreter changes the CSS 
opacity property for the selected element from 0 to 100. 

fadeTo 


► 


fadeTo lets you animate the 
selected element to a specific 
opacity percentage. 

fadeOut 



With fadeOut, the JavaScript interpreter changes the 
CSS opacity property for the selected element from 100 
to 0, but it keeps space on the page for the element. 


I 6ee| - 

The CSS opacity property doesn’t work the same across 
browsers. Fortunately, jQuery takes care of that for us. And, really, 
that’s all you have to know about that! 
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put a little slide in your hide 


Sliding is all about height 



JavaScript 

interpreter 



The JavaScript interpreter tells the DOM to change the CSS height 
property for the selected element(s) to 0 and then sets the display 
property to none. It’s essentially a hide with a slide. 


slideDown 




The JavaScript interpreter makes the selected element(s) 
appear by animating its height from 0 to whatever the 
height is set to in the CSS style. 


slideToggle 




The JavaScript interpreter checks if the image is at full 
height or 0 height and switches the slide effect depending on 
what it finds. If the element has a height of 0, the JavaScript 
interpreter slides it down. If the element is at its full height, 
the JavaScript interpreter slides the elements up. 
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jquery effects and animation 



So I can only slide stuff up 
and down? What if I want to slide 
something to the left or the right? 


jQuery only includes 
out-of-the-box effects for 
sliding elements up or down. 

You won’t find a slideRight or 
slide Left method in j Query (at 
least at the time of this writing). Don’t 
worry, we’ll sort this out a bit later... 


You won’t linct a 

or slicteLeft 
itietkocl in jQuery. 


i^arpen your pencil 


Which of jQuery’s out-of-the-box effects will work for the Monster Mashup app? 
For each effect group, answer whether it will help us and explain why you chose 
or didn’t choose each one. 


Effect 

Can we 
use it? 

Why? 

Show/Hide 



Slides 



Fades 
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sharpen solution 


i^arpen your pencil 


Which of jQuery’s out-of-the-box effects will work for the Monster Mashup app? 


Effect 

Can we 
use it? 

Why? 

Show/Hide 

hto 

Show/hidc c-f-fcd*ts wo〆 七 help us y/i*th Mor\s*tcv* Al^shup because y/e dor / 七 
r\ccd bo display propevty o-f 為竹丫七 hm 》 

Slides 

No 

Close, bu*t r\o di^ar. Wt need *bo slide -the irmd^e s*tvip SlidcUp, 

slidcpoy/h, dhd slides or\ly Irt us *thc propevty* Wc heed 

somrthm^ *tha*t *the lc-f*t pvopcvty* 

Fades 

Yes 

Wt c^y\ use -fade *to mcc*t sped 。灼 bluepr’m 七 *tha*t says 

irmd^es should -fade *m dhd ou*t ^uidkly, as i-f -they arc -flashrn^. 


Put fade effects to work 

The blueprint calls for the lightning images to fade in and out, but we 
need to do this quickly so it looks like they’re flashing. Let’s dig into 
fade effects a bit deeper to see how we can make the lightning work. 



厂 fWs the ID “ the (的七 

$ ( f! #lightningl lf ) . fade In ( "fast") 

/ 

You use o-f strmj farametevs. 

sIoy/) novw'dl) OV" fas 七 … 

… ov* you use d value m miHisedo^ds. Fov* 
example, you dould pu-t IOOO, ar>d -the 
c-P-Pcdi would take or>c second io artimaie. 

$ ("#lightningl TT ) . fade In ( 1000 ); 


TWis is y/V^crc i\\t u du\ratio^ 

joes. |*t tor\*tv-ols \\o^i lor\J it takes W 

*to 6omplc*tc. 


I se6or)d 
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Combine effects with method chains 


The lightning will need to fade in and out, and over and over again. Instead 
of writing those effects separately, you can use chaining, which you used 
briefly in Chapter 4 when you needed to climb up the DOM. Method 
chains are a feature of jQuery that links together methods to run on a 
returned set of elements. They’ll make the lightning effects easier and 
cleaner to write, so let’s take a closer look. 



TKc element’s display V»ll 
*fv-om Wlddch *to 
visible -Pull 


...then _七 will -fade badk 
"to -totally 


("#lightningl fT ) .fadeln() . fadeOut 




l-f you do〆 七 pui a du\raiio 灼 m 

七 he parentheses, 七 he c-P-Pcdt 

will dc-faul^t "to no\rrwal, whidh 
is 午 00 milliseconds or oA 




Write the line of jQuery code that will accomplish each of the steps shown below. 



Fade in the #lightningl element with a duration of one-quarter of a second. 



Chain another effect that fades out the #lightningl element in one-quarter 
of a second. 
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lightning strikes 


^€•1 鉍 

opi 


PLjiiipH 


Write the line of jQuery code that will accomplish each of the steps shown below. 


o 


Fade in the #lightningl element with a duration of one-quarter of a second. 

... . 



Chain another effect that fades out the #lightningl element in one-quarter 
of a second. 




Striking back with a timed function 

So now you’ve got lightning that can fade in and out, but the project requirements are for 
the lightning to keep striking. Real lightning zaps through the sky and then there’s usually an 
interval of time before another zap crosses the sky. So we need a way to do the fade repeatedly. 


Think back to earlier chapters where you needed to do a repeated task; what did you use? 
That’s right: functions! They showed up first in Chapter 3 to make a reusable click function 
and a randomizer, and now you can use functions to run the fades, wait a bit, and then do 
them again at a given interval. That will provide the slick effect of lots of flashing lighting for 
the Monster Mashup. Let’s take a look at a function that will do this. 


Hey, JavaSt\r*ip*t, build 


nc\rc S the y/C II 

use v/hch wc waht io 

匕 311 the -fuhdtioh. 


丁 is ou\r 

Ull the / variable called V. Dv-op it ih 

广 -- 3hd use below. 

function lightning—one(t){ 

$ ( TT #lightningl TT ) . fade In (250) . fadeOut (250); 

setTimeout ( n lightning 一 one () n , t) ; __ 少 


This lihe 

the 

Code- 


The sc*tT'»mCoiA*t This is some too\ JavaSd\rip*t 

■tells i\\t OS power. You *tcll vJS 

•to r\AY\ d •funtbo” av\d *mic\rp\rcicv- i\\ai you w 扣七 

y/a'it (or d Y/Wile before J ■“ ••丄 

\rur\y\m^ i*t 




mTxryrcxcr x,noiu you wemx 

*thc -fuir\d*tioir\ *to dal I i*Ucl-f 

over By\A ovcv 


This is the timout ihtcv-val. 
ItVm milliscdohds, just like 
the c-P-Pcdts duv-aiioh we 
looked at a -Pew pages a^o. 


In just three lines of code, you have a timed lightning 
function for the first lightning image. Now, try writing the 
functions for the other two lightning images. 
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jquery effects and animation 



jQueiy Magnets 


Put the code magnets in the right order to make the timed lightning functions 
for the other two lightning elements. 



lightning two 


I E3 





lightning three 


I E3 


Q 


• fadeln(250) 




setTimeout(( 

- 1 

•fadeln(250) 



lightning—three () ，，， 


setTimeout( 


( n #lightning3") 


I 
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jquery magnets solution 



jQueiy Magnets Solution 

Put the code magnets in the right order to make the timed lightning functions 
for the other two lightning elements. 


function 


lightning two 


( M #lightning2 n ) .fadeln(250) 




function lightning three 


(t) { 


("#lightning3") I.fadeln(250) i .f adeOut (250 )； 


setTimeout( 


lightning—three () ，， ， 



Is fadeln () . fadeOut () not 
the same as toggle? 

Great question! They are not the same. 
The toggle method is a single method that 
just switches the selected element from its 
hidden state to its visible state or vice versa, 
depending on what the selected element's 
current state is. Placing fadeln and 
f adeOut in a chain creates a sequential 
effect that will first make the selected 
element(s) fade into view and then, when that 
effect has finished, fade it out of view. 



The setTimeout method is new. 
Is that a jQuery thing ora JavaScript thing? 

The setTimeout method is actually 
a JavaScript method that you can use to 
control some aspects ofjQuery animations. 
Well get more into the setTimeout 
function in later chapters, especially Chapter 7. 

If you want to read about it now, visit 
the Mozilla Developer's Center: https:// 
developer, mozilla.org/en/window. setTimeout, 
or, if you really want to dig in, pick up a 
copy of David Flanagan’s excellent and 


thorough JavaScript book, JavaScript: The 
Definitive Guide (O’Reilly; http://oreilly.com/ 
catalog/9780596805531). 

When I use the hide effect, the 
element just disappears. How do I slow 
that down? 

To “slow down” the hide, show, 
or toggle effect, give a duration 
parameter in the parentheses. Here’s how 
we could’ve done the Chapter 1 hide: 

$ ( M #picframe n ) .hide(500); 
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jquery effects and animation 


Add the lightning functions to your script 

Using the code you put together in the exercise on the previous page, 
update your script file for Monster Mashup. 












These I'mcs — ^ 

^11 -the 、 - ^ 

*fuh 匕七 iohs 

tha-t av-c 
deiihed ih 
bold at -the 

v ^y botW 


These av-c 
i\\c 

dc*fm»*b»o\r\s. 


$(document) .ready(function() { 

var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0; 

lightning 一 one (4000) ; 1 The ^umbevs m pavc^ihcscs avc pav-a^c-tcvs m millisc^ds 

lightning 一 two (5M2.) ； ( ihai will be passed {o ihc 允七 Tiwou 七 me 七 hod. W\ih 七 h 仪 , 

lightning 一 three (7 避 … a | 七⑽忪 hashes o( 


$ ( 


}) 


}) 


}) 


#head").click(function(){ 

if (headclix < 9){headclix+=l;} 
else{headclix = 0;} 


#eyes").click(function(){ 

if (eyeclix < 9){eyeclix+=l;} 
else{eyeclix = 0;} 


#nose").click(function(){ 

if (noseclix < 9){noseclix+=l 
else{noseclix = 0;} 


$( M #mouth").click(function(){ 

if (mouthclix < 9){mouthclix+=l 
else{mouthclix = 0;} 

})； 

});//end doc.onready function 


I^Vc -took out some 
the lihC b\rcab -to save 
spade oh this Do^-i 


• — rw ? 

v/ov*v*y i-r you\r sd\rip 七 s 

breaks a\re di-ffcv-ch-fc. 


lihe 


y 



function lightning 一 one(t){ 

$("#container #lightningl n ).fadeln(250).fadeOut(250); 
setTimeout ("lightning—one () '▼, t); 

}； 一 

function lightning 一 two(t){ 

$ (▼▼ #container #lightning2 n ) . fadeln ( M fast") . fadeOut (，▼ fast"); 
setTimeout ('▼ lightning—two () '▼, t); 

}； 一 

function lightning 一 three(t){ 

$ (▼▼ #container #lightning3 M ) . fadeln ( M fast") . fadeOut ( M fast"); 
setTimeout ("lightning three () '▼, t); 


3 - 


my—scripts.js 
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test drive 




Tesr DriVq 


Open the page up in your favorite browser to see if your lightning effect was successful. 




You 

"the lijh-th'mg -fade 
by do^bihih 3 
it with JavaS^v-ipts 
sctTirwcout method. 

T^c -fades 

•m a 灼 d ou 七 ^ui^kly 3*t 

diKe\r ⑼七 m 七 ev^aU, 
simulat” v-cal 


So far, you’ve got the click functions working, and you made 
the three lightning images fade in and out at different intervals. 
Let’s take a look at the blueprint to see what’s left to do. 



face parts should be animated. 


monster face part should change 


ations should look 


A mockup of how 


Monster Mashup Project 

The Monster Mashup application is intended to entertain children in the target age group by allowing them to “mash up” 
their own monster head by mixing 10 different heads, eyes, noses, and mouths. The transitions between the monster 


"This dKuhk o-f "the blucpV"ih"t is 
bs 七 dhallch^c -Po\r the pv-oje^t 


ou\r 


It’s time to make a custom effect 
that will slide the monster face 
parts left. 


So, now we re at the point 、 
where we need to slide these left, 4 
and none of the out-of-the-box 
slide effects do that. Is there some 
other method we can use? r- 


Out-of-the-box effects are 
great, but they don’t let you 
do everything you want. 
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jquery effects and animation 


P1Y effects with animate 

So j Query has no slide Right or slide Left method, and that’s exactly what you need 
to do at this stage of the project. Does this mean that your Monster Mashup project is dead? 

Never fear — j Query offers the animate method for building your own effects. With 
animate, you can create custom animations that do many more things than the 
out-of-the-box effects do. The animate method allows you to animate CSS properties of the 
selected element(s), and it also allows you to animate multiple properties at the same time. 

Let’s have a look at some of the things you can do with the animate method. 


Motion effects 

IMHM _ 



You taY\ CSS position 

pvopcvtics *to illusion o( 

av\ clcmcir>*t Hike 七 lie mummy 

heve) advoss sdvee^- 




Scale effects 


eee _ _ 



V^u CSS height 

width plrop 饮 ties "to 
"tKc illusioh o*f 0\rov/ih^ 
o\r shHhkmj av\ dcr^Cht. 






What CSS property will you 
need to animate to make 
the monster face parts slide 
left on each click? 
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it’s a matter of math 


What can and caw't be animated 

With the animate method, you can also dynamically alter font properties to create 
text effects. You can also animate multiple CSS properties in one animation call, which 
adds to the palette of cool stuff your web app can do. 


As cool as the animate method is, it has some limits. Under the hood, animation uses 
lots of math (which, thankfully, you don’t have to worry about), so you are limited to 
working only with CSS properties that have numerical settings. Know your limits, but let 
your imagination run wild — animate offers all kinds of flexibility and fun. 


Text effects 


I’m shrinking, shrinking! 

Oh，what a world, what a world! 




I’m shrinking, shrinking! 

Oh, what a world, what a world! 


I’m shrinking, shrinking! 

Oh, what a world, what a world! 


I’m shrinking, shrinking! 

Oh, what a world, what a world! 




You car\ animate CSS <f 。 灼七 
pvofcv-tics *to dvca*tc illusion o( 
ievc-t yroWvr\^, ov shv-mkm^. 


"These 3\rc just a -Pew 

examples. Wed heed 你叫 , 
^y^f, rnSyN move pages -fco 
show dll or the possibilities. 


I’m shrinking, shrinking! 

Oh, what a world, what a world! 



Watch it! 


The animate method will only work on CSS 
properties that use numbers for their settings. 


■ 


■ 


borders, margin, padding 

element height, 
min-height, and 
max-height 


■ element width, min-width, 
and max-width 


■ bottom, left, right, and 
top position 


■ 


background position 


■ letter spacing, 
word spacing 


■ 


font size 


■ 


■ 


text indent 


line height 
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jquery effects and animation 



The anitnate Up Cl^se 

On the surface, animate works a lot like other 
methods you’ve already worked with. 


Select tllC 

you want -to aWi^aic 



Call *thc animate method. 

\ 


The ks 七 fav-amc*tcv- o( 
a^'ima'be allov/s you *to 
sclcd*t CSS p\ropc\rty 
you >war>*t *to 扣 


The second pa\ramctcv is the 
du\ratioh ih rwilliscdohds. This lets 
you doht\rol how \ov\^ it takes -fov- 


$r#my div-) .animate 500) 


I 灼 *tWis example, weVe ammatmj 

{\\t CSS fv-opev-by id. ...ahd setting i-t \qq p x 


But one of the most powerful features of animate 
is its ability to change multiple properties of the 
selected element(s) at the same time. 


丁 he *(Vst avgumcht is 
V'C^uivcd—you have h> put 
it ih thcirc ^o\r aWi^aic 
■to woirk. The se^ohd 
pMmctcir is op-tiohal. 


$( n #my_div n ).animate({ 

opacity: 0, ^ - ^ example, wcVc 

width: ”2 00' eMs 

height: ”800”^^ —ty W 似 “ 此咖 ly. 

}, 5000); 



The parameters for CSS properties 
have to be set using the DOM standard ， 
not the CSS standard. 



e 货 

What do you think is happening behind the scenes 
in the browser that allows the animate method to 
change things in front of the user’s eyes? 
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getting things moving 


animate changes style over time 


The visual effects and animation you see on a movie or television screen use the illusion 
of motion. Effects technicians and animators take a sequence of images and play them 
one at a time at a specific rate to accomplish that illusion — you’ve likely seen the 
low-tech flip books that accomplish this effect as you fan through the pages. 


The same thing happens with a browser screen, except that we don’t have a series of 
images to work with. Instead, the JavaScript interpreter repeatedly runs a function 
that changes the style of the animated element. The browser draws (or repaints) 

these changes to the screen. The user sees an illusion of motion or change to an 
element as that element’s style changes. 



When animate runs, the JavaScript interpreter sets 
a timer for the duration of the animation. 



O 


Change the CSS left 
property to 500px over a 
duration of 400 milliseconds. 


JavaScript 

interpreter 


IJf l 

^ \oo 



The JavaScript interpreter tells the browsers layout engine to change the CSS 
property specified in the parameters of the animate method. The browsers 
layout engine renders those CSS properties visually onto the screen. 




JavaScript 

interpreter 


rd like to schedule 
a repaint of the 
screen, please. 


Looks like I can 
fit that in over a 
few milliseconds. 


The browser’s 
layout engine 



The JavaScript interpreter repeatedly calls the function that changes 
the CSS property of the element until the timer set in step 1 runs out. 
Each time that function runs, the change shows on screen. 



The visitor sees the illusion of movement as the browser renders the 
changes to the element. 

The browser 



202 


Chapter 5 





































jquery effects and animation 




+ 瑜 




Match each chunk of custom animation code to what it does when it runs. 


$ ( M #my_div M ) . animate ({top : M 150px M }, "slow" ) Animates the change to all paragraphs’ 

left and right margins simultaneously. 


$ ("p") .animate({ 

marginLeft : "150px ", 
marginRight : "150px" 

})； 


Animates the right position of 
#my_div to 0 in half a second. 


$ ( " #my_div" ) . animate ({width : n 30%’'}, 250) 


Animates the space between letters for 
all paragraphs with default duration 
of 400 seconds. 


$("#my_div").animate({right : n 0 n }, 500) 


Animates the change to #my_div , s 
padding and width simultaneously. 


$ ( "p") .animate({letterSpacing : "15px n }); 


Animates the change to #my_div’s 
top position with a slow duration. 


$("#my_div").animate({ 

padding : "200px M , 
width : "30%" 

}, "slow") 


Animates the height of all images with 
a fast duration. 


$("img M ) . animate ({height: n 20px，'}, "fast") 


Animates the change to #my_div , s 
width in a quarter of a second. 
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who does what solution 


♦ 




♦:余 ^ 




Match each chunk of custom animation code to what it does when it runs. 


$( n #my div M ).animate({top : "150px "}, "slow") 


$ ("p") .animate({ 

marginLeft : "150px M , 
marginRight : M 150px 

})； 


$ ( n #my div M ) . animate ({width : n 30%’，}, 250) 


$( n #my div M ).animate({right : "0"}, 500) 


( M p").animate({letterSpacing : "15px"}) 


$( n #my_div M ).animate({ 

padding : n 200px ", 
width : "30%" 

}, "slow") 


("img").animate({height: n 20px n }, "fast") 



Animates the change to all paragraphs’ 
left and right margins simultaneously. 


Animates the right position of 
#my div to 0 in half a second. 


Animates the space between letters for 
all paragraphs with default duration 
of 400 seconds. 


Animates the change to #my_div , s 
padding and width simultaneously. 


Animates the change to #my_div , s 
top position with a slow duration. 


Animates the height of all images with 
a fast duration. 


Animates the change to #my_div , s 
width in a quarter of a second. 
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jquery effects and animation 


From where to where exactly? 

An important thing to remember about animate is that it changes the current CSS 
property to the CSS property that you set in the first parameter. To make your custom 
animation effective, you need to think hard about what you have currently set in the 
CSS. In the previous example, we changed the left position of #my_div to lOOpx. 
What will happen on screen depends entirely on the current CSS left property 
setting of #my_div. 


The current CSS property 



細 y_div{ 

left : 20px; 


The animate CSS property 


"The dcrwCht is 

animated -to av\ 

absolute fosi-tioh. 

$( n #my_div").animate({left : "lOOpx"}); 



If the current property is a different value, we’ll get a different result. 


The current CSS property 


The animate CSS property 


养 rwy 一 div 
s-tavts out at 
XOO^y.. 

細 y—div{ 

left : 200px; 




$( n #my_div").animate({left : "lOOpx"}); 



This is fascinating, but how will we 
use it to make Monster Mashup work? 


It’s all relative. 

To make the Monster Mashup monster face parts slide 
the way we want them to, we have to think about what 
their current positions are and how we want them to 
change relative to what their positions were the last time 
animate changed them. 
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it’s relatively simple 


Absolute vs. relative element movement 

Remember that we nested the image strips we want to show inside a div 
with an ID of #pic—box. The left property of div#pic_box is set to 
91px in the current CSS. To achieve the left slide effect that we want, let’s 
think about how we want to move the image strips. 



^ with -the 
head pav-t 

showing. Us velatively 
positiohed ai~0 px. 


pixels y/ide 


/idc ^^7 


pixels y/ide 




time *tKc USCV- 

t\\tVs, \Nt y/air\*t *to 
move imay s*tv*ip I 
^i>ccls *to *t^c left. ^ 



J oy/c h> tell the ahimatc method 

^ ^ 肩 pixels tacU 

the -ruh^tioh is 匕 ailed. 



Think about the example of absolute animation on the previous page. 


TWis -tells i\\c ar\'ima*tc w>c*t^od -to set 

\tli — W d #my_dw -to IOO 
fi%cls c%ad*tly- 

$( n #my_div").animate({left : M 100px"}); 



But V^ov/ do v/c tell -to move a 於 

dement - 训 every time tV^c 
dy\imd*bc method is C-dllcd? 

$("#head M ).animate({left:"???"}); 


Relative animation = wove it this much^each time 

With an absolute animation, you move an element to an absolute postion on the 
visual grid. With a relative animation, you move the element relative to where it 
was the last time any animation moved it. 
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But how do we make an element move 
relatively with the animate method? 

























jquery effects and animation 


Move stuff relatively with operator combmations 

There are some special JavaScript operators that move element(s) the same amount every 
time the animate method is called. These are known as assignment operators because they are 
normally used to assign a value to a variable in such a way that the variable adds the new value 
to its current value. It sounds a lot more complex than it really is. 


T\\t equals is ar\ 

ass'ijr\mcir\*t ofCV - 3"toV". 


I/Vhe 灼 you dombme av-ithme 七 id opc\ra*tov-s y/ith 
equals, you CY\d up y/i-th some useful sho\rtha^d- 


a 


20 


a += 30 


a 


10 


丁 he 二 opeva-tov assies the value 
2-0 -to the vaH^ble a. 


TV^c flus dombmed equals 

o^cv* 3 *tov* is s^ov"*t^3\r\d (or a — a 


"the rvtihus dombihed 
with the C^als opev-aiov is 
shov-tli^hd -ro\r w a — a — \0. }) 


10 ：' 


These operator combinations help you create a relative animation by allowing 
you to set a value to what it’s currently at plus or minus a number of pixels. 

TV)*»s moves -tv^c element IP o-f bo% 2-0 

cvcv-y time animate mc*t^od «s dalled. 

^~ - 、 

$ ( n #box n ) .animate({left : n +=20 n }); 

Here’s what will happen to #box every time the animate method above is called. 

d^n^d'lc v~ur\S 3r\d ahirwatc \ruhs 

Lets say se*b 七 *to + 二 2-0. wb Idt "to + 二 ZO. 

stav-ts a*t O. 




BULLET POINTS 





left = 0 


r 


left = 20 


^ left = 40 



By ddvdir>dm^ lc*f*t position Cdth 七 

ad-tually movmg I*t bo *tv>c 叫 ivt m 七 he birov/sev y/mdov/- 


Some other assignment 
operator combinations: 


■ 


a 




■ 


5 is shorthand 
for “multiply 5 by the 
current value of a and 
assign that value to a. 

a /= 2 is shorthand 
for “divide the current 
value of a by 2 and 
assign that value to a. 


Write the line of jQuery code that will accomplish each of the steps shown below. 


£站坤咏 ❶ 


Move the #head element 367 pixels to the left every time animate is called. 
Give it a duration of half a second. 



Move the #head element back to its original position (left : Opx)_ 
Give it a duration of half a second. 
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exercise solution 



Write the line of jQuery code that will accomplish each of the steps shown below. 


o 

SpLyilpH 


Move the #head element 367 pixels to the left every time animate is called. 
Give it a duration of half a second. 





Move the #head element back to its original position (left : Opx). 


Give it a duration of half a second. n - (S a b so | u te a^»mat»o^ resets 

ok v-cy/mdmj. 


^/Some people don’t want animation 
to interfere with their web page 
experience. What do I do if I want to let a 
user turn off the animation? 

That’s an excellent point. Animation 
can cause annoyance and accessibility 
problems. If you want users to turn off your 
web page animation, you can wire up a click 
button (you already know how to do that) to 
this line of code: 

$.fx.off = true; 

Another useful method for stopping 
animation is a jQuery method called stop. 
You can find out more about both of these 
topics at the jQuery site: 

http://api.jqi/ery. com/jQuery.fx. off/ 
http://api.jquery. com/stop/ 



You say, “The parameters for CSS 
properties have to be set using the DOM 
standard, not the CSS standard.” What 
the heck does that mean? 

J\l Great question! The animate method 
takes parameters written in the DOM standard 
(aka DOM notation) instead of CSS notation. 

Here’s a concrete example that illustrates the 
difference. To set the width of a border for a 
div in CSS notation, you would do this: 

div { 

border-style : solid; 
border-width : 5px; 

} 

Now, let’s say you want to animate that 
border’s width. In jQuery you set the border 
width property using DOM notation, like this: 

$("div").animate({borderWi 
dth:30}, n slow"); 


Note that in the CSS notation, you write 
border-width for the property, whereas 
in DOM notation, you write borderwidth 
property. 

If you want to read more about the difference 
between these two notation styles, read this 
article: 

http://www. oxfordu.net/webdesign/dom/ 
straight_text.html 

What if I want to animate a color 
change? 

To animate color transitions, you need 
to use jQuery Ul, which adds more effects 
than are included in jQuery. We cover jQuery 
Ul in Chapter 10, but not effects. Once you 
know how to download, theme, and include 
jQuery Ul in your web app, animating color 
is pretty easy. 
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jquery effects and animation 


Add the animate fuwetiows to your script 

Using the code you put together in the exercise on the previous page, 
update your script file for Monster Mashup. 







Da fills! 





( n #head") .click(function() { 
if (headclix < 9){ 

(this) •animate({left :’▼- =367px n },500); 

headclix+=l; 



}) 


else , 

$(this).animate({left: n 0px n },500); 

headclix = 0; 

1/Ve car\ use -the “ 七 his” keywovd 
bedduse v/cVc msidc 七 he (or 

•the element v/c dlidkcd- 


$("#eyes").click(function(){ 
if (eyeclix < 9){ 

$(this).animate({left: n -=367px n },500); 

eyeclix+=l; 

} 

else { 

$(this).animate({left: n 0px n },500); 

eyeclix = 0; 

} 

})； 


$ ( n #nose") .click(function() { 
if (noseclix < 9){ 

$(this).animate({left: n -=367px n },500); 

noseclix+=l; 

} 

else { 

$(this).animate({left: n 0px n },500); 

noseclix = 0; 

} 

})； 


$("#mouth M ).click(function(){ 
if (mouthclix < 9){ 

$ (this) . animate ({lef t : '▼- =367px n } , 500); 

mouthclix+=l; 


else { 



my—scripts.js 
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test drive 



Tesr DriVq 


Open the page up in your favorite browser to make sure everything’s working. 


00O 


X 


Rle 







J 

You made 
tus-tom lc*f*t slide 
wov-k. 

I^Vith a -Pew d\(,\cs, -the visi-tov- dah 

你 ash up his oym rnohs-tcv* -fade- 


m 
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jquery effects and animation 


j^uerycross 

It’s time to sit back and give your left brain 
something to do. It’s your standard crossword; all of 
the solution words are from this chapter. 



Across 

1 . hide, show, and toggle animate this CSS property. 

5. jQuery effects and animation are about manipulating_on 

the fly. 

6. _= 1,000 milliseconds. 

7. Parameter that controls how long it takes for the effect to 
complete. 

8. Creates the illusion of an element moving on the screen. 

10. Effect method that lets you animate the selected element to 
a specific opacity. 

12. jQuery feature that allows you to link together methods you 
want to run on a returned set of elements. 

13. The animate method will only work on CSS properties that 

have_values. 

14. You can animate CSS_and width properties to create 

the illusion of growing or shrinking an element. 


Down 

2. The effect to use when you want to animate an element’s 
height property. 

3. When you want to animate elements, you need their position 

property set to_ _, fixed, Of relative. 

4. Effects method works like this: if the selected element 
has a height of 0, the JS interpreter slides it down. If the 
element is at its full height, the JS interpreter slides the 
elements up. 

9. When you run this jQuery effect, the JS interpreter changes 
the CSS opacity property for the selected element from 0 to 100. 
11. The jQuery library offers this method when you want to build 
custom effects. 
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a monstrous success 


Look, Ma, ho Flash! 

The web projects director is pleased with the results of Monster Mashup. You 
used jQuery’s out-of-the-box effects combined with your own custom effects 
tailored to the customer’s needs. 




This is cool! Ive made 
so many monsters, 
Ive lost count! 


Our 6 - to 10-year age group loves 
Monster Mashup. And we don’t need 
to use Flash or browser plug-ins. Wow, 
jQuery is a good fit for us! 


This is awesome! 
I*m going to scare my 
little sister with the 
monster I made! 


212 Chapter 5 



















jquery effects and animation 



jQ^eryCross Solution 
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your jquery toolbox 



Your jftuery Toolbox 

You’ve got Chapter 5 under 
your belt and now you’ve added 
jQuery fade and slide effects plus 
custom animation to your toolbox. 






£lidc 

s lidcUf> 

s ’ide£)c> Wh 

sli deTo 3d l c 




r tveatc 扣 


Lc*b 
W 

的 

SC 七七呼 L 士 I 細 absoluWv ov velatwelv- 

^ be -oved c»thcv / 

. 丄 “一 + -） wake v-clatwc 

O^trabor domWaWs (- ，十， 
av>wa*t*»o^ ^t\\ casicv- 


\JkJWT% 从 …” - - 

avW 七 cv\ou^V>. 

, s C£S ^vo\>cv-t*»cs ovcv We. 
也 j CSS 州 ― 
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inke^Query，I am 
♦ your father! ♦ 



jQuery can’t do it all alone. Although it is a 

JavaScript library, unfortunately it can’t do everything its parent 
language can do. In this chapter, well look at some of the 
features of JavaScript that you’ll need to create really compelling 
sites, and how jQuery can use them to create custom lists and 
objects as well as loop through those lists and objects to make 
your life much easier. 


this is a new chapter 
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jquery or bust 


Spicing up the Head First Lounge 

Lucky you, news of your jQuery prowess is spreading far and wide. Check 
out this email from the Head First Lounge asking for some help to increase 
the entertainment level for its visitors. 

From: Head First Lounge 
Subject: Blackjack Application 

Hi! 

Ifs your pals over at the Head First Lounge. Were hoping you can help us out with 
anew application we want to give to our visitors. 

We would REALLY like a blackjack application for our site. Can you do that? 

Ideally, the player would click and get dealt two cards, with the option to ask for 
more cards. 

Here's the house rules we would want included in the game: 

1. Ace is ALWAYS high (equaling 11, never 1). 

2. If a players cards add up to mom than 21 , then she is bust and must start again. 

The game is over. 

3. if a player s cards add up to exactly 21, then she has gotten a blackjack and the 
game is over. 

4 . if a players cards add up to 21 or less, but she has already been dealt five 
cards, then the game is over, and she wins. 

If none of those conditions is met, players can ask for another card. 

If one of the rules/conditions is met, then end the game. 

Give the players the option to reset and play again. 

But we dont want them to have to reload the page. The game should 
reset itself. 

Can you do that for us? Wed be ever so grateful! 


Head First 

ioufi^e 
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Jim: Hey, have you guys read the email from the Head First Lounge folks? 

Frank: Yeah, it looks like they want an easy-to-play blackjack game on 
their site. Should be pretty straightforward, I think. 

Jim: Straightforward? But it’s blackjack! We need a deck of cards, a 
dealer, a counter for the hand, and more. Do you think we can do all 
that? 

Joe: It’s not going to be easy, but I think we can get it done. Like you 
said, we’ll need something to deal the cards. We can write a function 
to do that. We’ve already written a random function before, so we can 
probably use that again. 

Jim: Oh yeah... But what about the cards? There are 52 of them in a 
deck. 

Frank: We can just have a big list of them and pick a random one from 
the list each time. 

Jim: But how do we avoid picking the same card twice? 

Frank: I think I know how to do that … 


Jim: Wow, that’s impressive! And what about remembering which cards 
we have already? And counting them up as we go? 

Frank: OK, now you’ve got me. I’m not too sure how to do that. 

Joe: No worries. There are quite a few JavaScript and j Query features 
we can use to help us out here. 


Jim: Wait, wait, JavaScript? Can’t we use variables or j Query arrays to 
remember our cards? I thought we really didn’t have to get into a bunch 
of JavaScript if we’re using j Query... 

Frank: Variables on their own may not cut it. They can only really 
store one value at a time, like a number or a string of text, or a 
particular element on the page. And a j Query array can hold multiple 
values, but only of DOM elements returned by a selector … 

Joe: That’s right. We need something a little more flexible. 

Frank: Like our own structures or variable types. 

Joe: Correct again! And we’re going to need JavaScript to create our 
own structures … 


you are here ► 
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no objections 


Objects offer even smarter storage 


The data structures you’ve used so far are variables and arrays. Variables offer simple 
storage: they assign one value to one name. Arrays let you store more data more 
efficiently by letting you create multiple values with one variable name. 


Variable 


Array 


A vav-iablc iremervtbev-s ohc 
value whch you dssi^h -the 
value -to the vairiablc 


var a = 42; 




f[Y\ av-v-ay v-cmcmbcv-s 
n\\A Itiflc values 
y/V^Cir\ you 3SSiJr\ 
•b^OSC values -to 
va^'idble 


var v 


[2, 3, 4] 


Objects offer even smarter storage. You use objects when you need to store multiple 
variables about a particular thing. Inside of an object, a variable is called a property. 
An object can also contain functions that let you interact with the object’s properties. 
When you build such a function inside of an object, it’s called a method. 



Object 


objcd*t vemembevs i*U 

daia as profcvtics. 


The dd'td IS r^ov/ Co\\tt{,td 
uy>dcv oy>c -fov* 3 


You cby \ a*t a^y o-f objects 
p\ropcv-*tics usrng do*t sy^*ta>c. 



leopardObject={ 

num—spots : '' 23 '', 


color : 

个 

Y^u associate ) 

a f\rope\rjy 


"brown"}; 



… y/rth a value- 


Use objects wken 
you need to store 


multiple pieces 
oi data aLout a 


particular tliingf. 


planeObject.engines; 
leopardObject.color; 

The object l*b pv-opc\rty 



What properties might a 
card object have? 
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Puild your own objects 

Objects are essentially a way to create your own custom variables exactly howyou want 
them. You can create one-time-use objects, or create your own object blueprint that 
you can use again and again. We’ll look at reusable objects in a little bit, but for now 
let’s discuss how to create a one-time-use object and some of the terms and diagrams 
associated with an object. 

Objects can be described in a standard way, using a UML (Unified Modeling Language) 
diagram. UML is a general-purpose, worldwide standard for helping to describe objects 
in object-oriented programming. 

When an object has a variable associated with it, we call that a property of the object. 
When an object has a function associated with it, we call that a method of the object. You 
create one-time-use objects using the var keyword, just like for all the other variables 
you’ve seen so far. 

UML diagram of m object 

This structure helps you see how your 
object is structured before you write any 
code. 


And here’s how you’d write that object 
in code: 


object’s 




Object methods 


myCountry 

myName 
myCapital 

getCapital() 


7^^ Object 
J properties 


Create object called 
woyCowbry us.” vav*. 

Cvcatc a method o( 

object, called grtCapi-tal. 

Cv-ca*tc fv-ofcv-t'ics o-f 
obje 比 called 


var myCountry = { 

getCapital : function() 

alert(this.myCapital); 


myName : 1 USA ', 




Set the value o( 
pv*opc\rtics. 


yfi\\tv\ method 

yb tailed cy\tlosc ar\ object 

•m tuvly bv-a^cs. 


myCapital : 'Washington DC' 





As it turns out, nearly everything in j Query and JavaScript is an object. 

This includes elements, arrays, functions, numbers, even strings — and they all have 
properties and methods. 
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DIY objects 


Create reusable objects with 
object constructors 

One really nice aspect of objects is that they can have the same structure 
but hold different values for their properties (or variables). Just like creating 
reusable functions — like we did in Chapter 3 — we can create an object 
blueprint, or object constructor, so we can use it multiple times. An object 
constructor can also be used to create instances of the object. 

The constructor is just a function, so in order to create a constructor for 
an object, you use the keyword function instead of the keyword var. 
Then, use the new keyword to create a new instance of the object. 










function myPerson(a,b){ 
this.name = a; 


Object p\ropcv-tics 



Sc*t objcd*t 
^ — pv-ofev-ty values. 


this.age = b 





Tiic object as a 

UML diajv-aw> 



Hmm, like a blueprint for 
a house, if I design it once, I 
can use it over and over again. 
That*11 save me some time! 





Can you think of a place where 
you can use these objects? 
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Interacting with objects 

Objects come in all shapes and sizes. After you instantiate (or create an instance of) 
an object — whether it is an object you created or one created by someone else — you 
interact with it using the dot (.) operator. To get a feel for how this works, let’s take a 
closer look at the myCountry and myPerson objects that we just defined. 


丁 he ^ohVCh-tiohS -pov us'rn^ 
the dot opc\ra-to\r av-c ci-thcv- 

object 一一 ^ 

o\r ob/d ： _j^rwC.p\ropcV"ty. 
heIrwcO. 


myCountry.getCapital() 

alert(myCountry.myName) 

IXse "the dommdirtci "to 
d r>cw i^s-ta^dc o( av\ object 


Call *tKc ytCaprtal me 七 hod. 

This will v-csult ih the 

displayihg 'Washmg-toh DC ” 


A^css propev^y. 

TiVis y/ill \rcsul*t m 

pay display'm^ “WSA.’ 


厂 var actorl = new myPerson('Jack', '42'); 
Y)Cv/ ihs-t^hdes var actor2 = new myPerson ( ' Mary' ，- '33'); 

of the myPcv-soh X 

object called a^-tovl 
3hd ad-fcov-Z. 


Pass ih these values as 
a\rgu^ch-ts -to the hew 
4-Uh^tioh io set these 
as 七 k firopevty values. 


alert(actorl.name) 
alert(actor2.age); 


J\utss i\\t ay fvo\>c\rty 
七 he myPcv-soh object "mstar\dc, 
A^IUrl ^h>r2 - (^>) ^ "t-Wis tasc)- 


/\ddcss *tV>c pvopcv-*ty 
*tiic rwyPcvsov> objcd*t 
*ms*tav>dc, dalled ad-fcov-l. 


丁 his will \rcsul-t ih the 
display— w Ja^k. w 



Ah, I think I get how this works... Could 
I create an object to represent cards in 
a deck for the Head First Lounge? 


Yes! That's a great idea. 

Let’s set up the HTML page and then have a look at 
how we can go about creating a card object. 
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let’s get this game started 


Setup the page 


Create your HMTL and CSS files using the information below. 
Don’t forget to create a my—scriptsjs file, too, in your scripts folder. 
We’ll be adding plenty of code to that in the coming pages. You 
can download all the image resources for the entire chapter from 
http:/ / thinkjquery.com/ chapter 。 6/ images.zip. 



Da fMs! 

w 


<!DOCTYPE html> 

<html> 

<head> 

<title>Head First Black Jack</title> 
<link href="styles/my_style.css" rel= 
</head> 

<body> 

<div id= n main n > 


#controls{ 

clear : both; 

} 

細 y—hand{ 

clear : both; 

border : lpx solid gray; 
height : 250px; 
width : 835px; 

} 

h3 { 

display : inline; 
padding-right : 40px; 

} 

.current_hand{ 

float : left; 


stylesheet"> 



my—style.css 


<hl>Click to reveal your cards</hl> 

<h3 id= n hdrTotal"></h3><h3 id= M hdrResult"></h3> 
<div id="my_hand M > 

</div> 

<div id="controls"> 

<div id= M btnDeal"> 

<img src= n images/deck_small.jpg"> 

</div> 

</div> 

</div> 

<script src="scripts/jquery-1.6.2.min.j s"></script> 
<script src="scripts/my_scripts . j s ''></ script> 
</body> 

</html> 


1 - 

index.html 
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Tqst DriVQ 


Open up the index.html page 
you just created in your 
favorite browser to see the 
basic structure of the page. 




Using the UML diagram for a card object given below, create a reusable object called card that 
takes three parameters called name, suit, and value. Set these parameters as the values 
of the object’s properties. This particular object doesn’t have any methods. We’ve filled in some 
of the code for you already. 
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exercise solution 



SpLyilpH 


Here’s your card object. Add it to your my_scripts.js file, inside the $ (document). 
ready ( function () { }) ； section. For now, this should be the only code in the file. 



Use 

to w akc •七 vcusaWc. 


function card( name, suit, value ) 


this.name = name; 
this.suit = suit; 
this.value = value 


card 



name 

suit 

value 


my_scripts.js 


What’s the difference between one¬ 
time and reusable objects? 

One-time use objects are simply a 
fancy variable defined to hold multiple pieces 
of information. Reusable objects are just 
that—reusable. After you define the template 
for a reusable object with its properties/ 
methods, you can create as many copies of 
this object as you want—each with different 
information describing the object. 

It looks like you’re using different 
ways of setting properties. Is that right? 

Yes, we are, and yes, it is. You can 
assign the value of properties using the 
assignment operator (=) or the colon (:) 
symbol, just as we did for our objects. Both 
are valid and interchangeable. 



Anything else about objects you’re 
not telling me? 

That’s a tough one. They are a pretty 
complex feature in JavaScript. Later in the 
book, we’ll use JavaScript Object Notation, 
aka JSON. Using JSON, we’ll access 
properties with a slightly different method, 
which can also be applied to your JavaScript 
objects here. That is the “key” notation. 
Rather than doing: 

object.my_property 

you can do the following: 

object['my_property'] 

and get the same result—access to the 
value of my_property. 


Where did UML come from? 

UML was born in the mid-90s when 
companies were trying to get a clear method 
of describing objects. There have been 
several iterations of it since, with several 
private companies competing to have 
their version as the accepted standard. 
Thankfully, though, there is a standard, and 
anyone using UML will be able to read and 
understand diagrams and information from 
other UML sources. 
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So that card object is going to be 
super useful, but we still need some 
way of keeping track of individual 
cards as they re played, right? 


You’re right. 

We need a way to store and access cards 
as they’re dealt. Good thing is, we’ve 
already seen how to do this … 


The return of arrays 

As you’ve already seen, we can group several items into a single structure called 
an array. The items in an array are not necessarily related to one another, but 
accessing their values becomes a lot easier this way. Back in Chapter 4, we saw how 
a jQuery selector returns items and stores them in an array. Now we’re going to use 
JavaScript to get even more utility out of arrays. 


Variables in an array can be any type, including strings, numbers, objects, even 
HTML elements! There are several different ways of creating your own arrays: 



IK 


Cv-ca*tc 

usm^ tnc 从 w 

keyv/ord* 


y UC cm 


var my arrl = new Array() 


US '^9 the Vv/ 


var my arr2 = new Array( 1 USA 1 , 1 China 1 , 1 Japan 1 , 1 Ireland 1 ) 


Cvca*tc dir\ avvay, V • 七 iiou 七 - ^ 

keyv/ovd, bu 七 七 he values by 

Cy>dlosiir\^ iy> s^u3V*C C 3 bv3£.kcts* 

And, as we mentioned earlier, arrays are objects 
too, which means they have methods and 
properties. A common array property is length. 
This denotes how many items there are in the 
array. You can access the length property with 
array name.length. 


There is no difference 
between the various ways 
of creating arrays. 

It’s common to mix and match 
the different ways, depending on 
the array’s purpose. Look up “JavaScript array 
methods” in your favorite search engine to find 
all the methods the array object has. 


var my arr3 = [ 1 USA 1 , 1 China 1 , 1 Japan 1 , 1 Ireland 1 



Watch it! 
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access is all about the index 


Accessing arrays 

Unlike with creating arrays, there is only one way to access the information inside 
an array. Arrays are zero-indexed — that is, their position (or index) in the list starts 
at 0. We used the index back in Chapter 3, so you can always go back there for a 
refresher if this isn’t clicking. 


The -Pivs-t ih -the lis-t i i r i 

has ar, mdoc of O f the ^ a T uSC >f adk 出 [] 

has mdoc o( I, SO ^ auess，lcms m 

alert( my arr2[ 0 ]); 


ttcvc^s 七 he av-vay 

Y\din\C, ^l\uc\\ >MC 

dvca*tcd or\ 2 -Z^. 


// USA appears in the alert box 

, - Theve’s y\o Y\tcd (or Quotes y/heh 

alert ( my_arr3 [2〆]); a “ cs — 扣 針 ay by i^dc>c. 

// Japan appears in the alert box 

- Tvymg b> atdess dv> *mdc% *tha*t 

doesn't v/ill vesul 七 m 扣 

w Ur>dc-f*mcd \Y\dt% cv-vov-. 


alert( my arrl[1]); 


// Results in an error because it is empty 


Tke index oi an 
item in a list refers 
to wkere it appears 
in tke list. 


OK, so now weve got an array with 
some stuff in it, but are we stuck with 
what we initially put in there? 


Definitely not! 

It’s easy to add, change, and delete items 
in an array. Let’s take a look at how. 
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Add and update items m arrays 

We can add as many items to an array as we want. In the example on the 
previous pages, we prepopulated some items into the my_arr2 and my_arr3 
arrays, but we left the my_arrl array empty. We can add or update items in 
an array, and to do that, it’s again all about the index. Here are a few different 
approaches to updating an array: 


Sc*t value o-f f ivs 七 


^ ― " rtem m 七 he 你 y 一 dv*vl avvay. 
my_arrl [0] = "France" ; 

alert ( my arrl [ 0]); 


// Displays 1 France f on the screen 


Add a sctoy\d value "to - 

*tV^c avvaY* m y arrl [ 1 ] = "Spain"; 



my arrl[0] = n Italy n ; 


Update the value o-p the -fivs-t 
•terw the my__av-v-l 


alert( my_arrl[0]); 

// Displays ! Italy 1 on the screen 


my arr3[2] = "Canada"; 


Update value tWd 

*m i\\t 叫一狄 A a^ray. 


alert ( my_arr3[2]); 

// Displays 1 Canada 1 on the screen 



In your my_scripts.js file, after the card object code, create an array called 
deck with all 52 cards in a standard deck in it. 

You can use the card object you’ve already created and call the constructor each 
time with the correct parameters to create each card—Ace through King, for each of 
the four suits (Clubs, Hearts, Diamonds, and Spades)—and the value of each card, 
with “Ace” worth 11, “Two” worth 2, Three” worth 3, and so on. 
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exercise solution 



SpLjiiipH 

Sc*t *tKc o( *tKc av-vay 


Your my_scripts.js file should now contain an array called deck with 52 cards from a standard 
deck in it, as well as the card object. You should use the card object you’ve already created 
and call the constructor each time with the correct parameters to create each card. 



Pass m *tV>vcc fav-amc*tcv-s 
(or tBt\\ tav-d objects. 


var deck =[ 

new card ( 1 Ace ' , 'Hearts'll), 
new card('Two ', 'Hearts',2), 
new card( 1 Three 1 , * Hearts 1 ,3), 

new card('Four ', ’Hearts',4), 



new card('King' 
new card('Ace ', 
new card('Two ', 
new card('Three 


'Hearts',10), 
Diamonds 1 ,11), 
Diamonds',2), 

* Diamonds ',3) r 


new card('Queen 1 , 1 Diamonds10), 

new card('King ', 'Diamonds10), 

new card( 1 Ace ', 'Clubs } ,11), 

new card('Two', 'Clubs',2), 


new card('King ', 'Clubs',10), 
new card ('Ace', 'Spades'll), 
new card('Two ', 'Spades',2), 
new card( 1 Three 1 , 'Spades',3), 
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new card('Jack', 'Spades10), 
new card('Queen ', 'Spades10), 

new card('King ', 'Spades',10) 


~ - ~^ - ^ 

-to Chdlosc the values ih 
your a^ay i , ，辦 bvadkets. my_scripts.js 

Chapter 6 



But we have a lot 
of cards in an array now. 
It seems like wed be writing a 
whole lot of code to get them 
back out again. What a pain! 


Not necessarily. 

We will still access each 
item by its index, but 
we can use a technique 
similar to each, which 
we saw back in Chapter 
3, to access each item 
in turn without writing 
a ton of code for every 
card. 

It’s time to take a trip 
through Loopville... 


















jquery and javascript 


Perform aw action over (and over, and over...) 


You’re going to be putting cards into and getting info back out of arrays quite a bit for 
this blackjack game. Thankfully, JavaScript comes prepared for just this scenario with 
loops. And the even better news is you’ve already done this before: back in Chapter 3 ， 
you used the each jQuery method to loop through elements based on a jQuery selector. 
But in this case, we’ve got more options, as JavaScript has several different types of 
loops, each with a slightly different syntax, and each with its own purpose. 


The for loop is great for repeating code a defined 
number of times. You should know this number before 
you start your loop, or it could go on forever. It can run 
zero or many times, depending on variable values. 


A for loop repeat cycle: 

O … ❺…❺…❹…❺… ⑩… ⑩… 



loof dytlc loof dydlc 


The do . . . while loop will run your code once, and then 
will keep running the same code until a particular condition 
is met, like a value turns from true to false (or vice versa), or 
counting to a particular number is reached in the code. A 
do . . . while loop can run one or many times. 

A do . . . while loop repeat cycle: 


o … ❺…❹…❻…❺… o … o … 



Oy\t loop dydlc 



/\^o*thcv- loop dydlc 


ior loops let you repeat code a 
deiinect numter ol times. 


cto*..wkile loops let you run your 
cocte once and tken repeat it until 
a particular condition is met. 


Every loop, regardless of type, has four distinct parts: 



Initialization 

This takes place one time, at the start of the loop. 


❺ Test condition 

This checks to see if the loop should stop or keep going for another 
round of running code, usually by checking the value of a variable. 

❺ Action 

This is the code that is repeated each time we go through the loop. 

❹ Update 

This portion updates the variables being used by the test condition 
to see if we should keep looping or not. 



you are here ► 


229 






caught in a loop 



Ilf CjaSe 


Taking an up close look at the different loop types we mentioned, we can see that 
they each contain the four main elements, but in a slightly different order. This order 
reflects some of the main differences between the loop types. 


for loops 


>wo\rd U -fov* W 


TV>c scdtio^ ( ) dc*f mcs 

iioy/ loy\^ loo^ is *to Ust 



/ \|>ways cir>tlosc loops 
•m tuvly bvadkcts. 


< my arr2.length 


Pedlar a variable for ( var i=0 

•m I oof 七 ha 七 

you will use *to \ I 

addess iKe mde% Q alert ( my_arr2[i] ); th is “ 0 _ 0h 



o( 七 he avvay. TWis 
vav-'iable \y\ oy>ly 
used ms'idc 七 he loop.} 




f[tttss 七 he av-v-ay 
us'm^ vav-'iablc 
dc-f med m 七 he loop. 


method -fov- all 
’七 tells you how mdhy 
items the a 


Close youir loop ； s 
匕 uirly bira^kcts. 


avray has. 

for loop repeat cycle: 

… ❺…❺…❹…❺… ⑩… ⑩… 

Or\t loof dydlc loof 


do...while loops 

Pcdlav-c a variable *m -the loop 
^ i\,ai you use addess -the ^ 咖…匕 

y ^e%onhe array. o,ly used inside the loop. 

var i=0; 

S"ta\rt v/iih ihc v/ov-d “do.” 

❶ do { 


Rcmcmbcv- *to 
Cir>dlosc loops m 
duv-ly bv-adkets. 


i + 


❺ alert(my_arr2[i]); 

Ir^dvcasc *tiic doy>d*rt'iov>al 
v/ahable as you 50 七 hvou^> 

七 he loof .^^ 

}while (i<=5); 

Ehd with the word w v/hilc. w 


Do...while loop repeat cycle: 

❶…❺…❹…❻…❺…❹…❺… 

Otxt loof> dydlc hr\oi\\tr loop dydlc 
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Wow, these loops should get us moving 
pretty quickly through all the cards. Well 
have this app done in no time. Whafs next? 


O 



Frank: Well, we have our array of card objects, but we need to be 
able to pull out a card at random when we deal, right? 

Joe: Yes, and thankfully, we’ve already written that getRandom 
function back in Chapter 3. That’ll give us a random number each time 
to pull a card out of the array. 

Jim: But what will we do with it then? 

Frank: We’re going to have to remember it. We have to be able to add up 
the total value of the cards to find out if the players went over 21 or not. 

Joe: And for another reason. We can’t give them the same card twice, so 
we also have to make sure it hasn’t been dealt already. 

Jim: Gan we use a variable to remember the cards? 

Frank: We can use an array variable... 

Joe: Good thinking! We don’t even have to store the cards; we 
can just store their index values. That way we can test if it’s in our 
used—cards array. 


Jim: Wow, that’s impressive! How can we tell if a value is in an array? 

Frank: Using a jQuery utility method called inArray. 

Joe: That sounds handy. But I think we’re going to need several 
functions to do this for us. We have to get a random number between 
0 and 51, and we have to check if we’ve used it already. If we have, we 
need to try again. If not, we need to get the correct card out of the deck 
and remember the index of that card. And then we need to show that 
card to the player. 


Jim: Sounds like a lot! How are we going to show the card to the player? 

Frank: Well, we already have the images, and they’re arranged by suit 
and named type, so we can use those attributes of the card object to 
put the image on the screen. 


Joe: Exactly. We can create a DOM element and append it to the 
my_hand div element already on our page. 

Frank: This card object is already paying dividends... Let’s get to it! 
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variable hide and seek 


Looking for the needle in a haystack 


Often you’ll need to see if a variable already exists in an array or not, so you don’t 
end up duplicating data, or to prevent your code from adding the same thing 
several times to an array. This can be particularly useful if you use arrays to store 
things like a shopping cart or a wish list. 


=r y s y ‘祕 


ft “一七 匕 “d 


var haystack = new Array('hay ', 'mouse', ' needle 


pitchfork') 


j Query provides a whole host of utility methods to help us get particular tasks done 
more efficiently. These include functions for checking what type of browser the site 
visitor is using, for returning the current time, for merging arrays, or for removing 
duplicates from arrays. 


The utility method that’s useful for this particluar situation is the inArray 
method. It will return where in the array the value you’re looking for is located (its 
index), if at all. If it cannot find the value in the array, it will return -1. Like other 
utility methods, inArray does not require a selector — it’s called directly by the 
j Query function or j Query shortcut. 


Cv-ca*tc a vav-*iablc bo hold 
value of 


The value youVc 
lookup (or 


Tiic av-vay m 

you y/a 灼七 *to look 


var index 


TV^c siiov-Uu-t 


J 


.inArray( value, array ); 

The m/Way utility method t,a\\ 

Hive’s 七 lie value 
youVc lookm^ -fov. 


ttcv-c^s 七 he av-vay you 

y/a 灼七 *to scav-dK- 


var needle index = $.inArray( f needle 1 , haystack 





Which feature of the blackjack application needs to 
check if we've already used a value? 
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jQueiy Blackjack Code Magnets 

Arrange the magnets to write the code that will complete several functions to help you finish the 
blackjack game. The completed code should create two functions — deal and hit — as well as a click 
event listener for an element with the ID of btnDeal, and a new array variable called used_cards 
to remember what cards have been dealt already. 


var used_cards 
function 


new 


0 ; 


for(var i=0;i<2;i++){ 
hit (); 


function getRandom(num){ 

var my_num = Math.floor( 
return my_num; 

} 

function _{ 

var good—card = false; 
do { 

var index = 


★num); 


(52); 


> - 


if( !$.inArray(index, _ 

good—card = true; 
var c = deck[ index ]; 

[used cards.length] = index; 
hand.cards[hand.cards.length] = c; 
var $d = $( n <div>"); 

$d.addClass("current—hand") 

• appendTo (_); 

$( M <img>").appendTo($d) 

.attr( r 


getRandom 


I deal ( ) I 



ES3 f ^itO 1 


I while I 



， ▼ 細 y—hand’ 


images/cards/' + c.suit 


c.name 


• jpg’ 


.fadeOut('slow') 
.fadeln('slow'); 


!good card); 



I function | 


good card = false; 


$ ( M #btnDeal") .click( 
deal (); 

$(this) .toggle (); 

})； 


0 { 




my—scripts.js 
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code magnets solution 



jQuery Blackjack Code Magnets Solution 

Here’s the code to complete the deal and hit functions, as well as a click event listener for an 
element with the ID of btnDeal, and a new array variable called used cards to remember what 
cards have been dealt already. 



var used cards = new 
function 


J deal () [ _ 


」 Array | 


0 ; 


Cv-ca*tc air> av-vay *to 
hold used dav-ds. 


for(var i=0;i<2;i++){ 

hit () ; ^ 〜 

} The ytRa 灼 d 。 眯 

function getRandom(num){ 

var my_num = Math.floor( 
return my num; 


Use a -fo\r loop -to ca\\ the hit -fuhdtioh twi^c. 


Math.random() *num); 


function 


hit () 


var good—card = false; 

do { _ 

var index = 


/ var index = _ [ getRand om 

丁 he ^ohditiohal if( !$•inArray(index, 

variable 4^* -the 

do...while loop. 


(52); 


Chcdk i-f youVc already us*m^ *tKc 
dav-d youve fitked, by us*m^ 


good—card = true; 
var c = deck 


used cards 


index ]; 

[used_cards.length] = index; 
hand.cards[hand.cards.length] = c; 
var $d = $("<div> n ); 

$d.addClass("current hand") 

.appendTo( 


)> -1 ){ 

the card -fvorn 
the AttV avv-ay. 


Add -the 


ihe c^A lo '^r 


^cdd3\rds 


M #my hand' 


5\riray. 


("<img> M ).appendTo($d) 

.attr( ^src ^]_ ， 

.fadeOut('slow 1 ) 
.fadeln('slow'); 


images/cards / ' -f 

-flash oh s^vcch. 


while 


c.suit + ' / ' + c.name + 

p\rofCV-*tiCS o-r 
ddv-d objcd*t *to build 七 he 
pa 七 h *to 


jpg' 


good card 


!good_card); 
false; 


$ ( M #btnDeal") .click( 
deal (); 

$ (this) .toggle(); 

})； 


function 


.Tv*y Y ou vc 

dlveddy used tav-d- 

0 { 


Call deal oy \ oy> dlidk- 
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Tesr DriVq 


Add all the code from the previous magnets exercise to your my—scripts.js file, after 
your deck array, and give it a try in your browser. Click on the deck of cards to 
deal your next hand of blackjack. 


Q 


'http, chapteiOt> rtepJ 


分 ▼ S C X Head Fint BUck t 


Click to reveal your cards 





httj. Ihinlyquefy.com -ch«pte»W. 


P * SCX ^ Fint eiMt tock 


Click to reveal your cards 





Hey, I can only give out two cards. 

As the dealer, Til nearly always win! But 
maybe we should make it fair. Can you 
build a way to give out more cards? 


Sure, we can create an option to get more cards from 
the deck using the hit function we’ve already created. 

We just need something to run that function, like a button click or similar. 
This adds a new wrinkle, too: now we have to remember and count which 
cards have been dealt out so we can tell if the player goes bust or not. 





Can you think of what we could use to remember 
all this different information? 
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ready bake HTML and CSS 


keapy BaK^ 

—哪鴻 


Since you’re already a style and structure pro, we’ll just give you 
the updated code for your index.html and my_style.css files so you can 
compare. You should see some changes to your page after you add in 
the new HTML and CSS code. We’ll wire it all up in a little bit. 


stylesheet"> 


<!DOCTYPE html> 

<html> 

<head> 

<title>Head First Black Jack</title> 

<link href="styles/my_style.css" rel 
</head> 

<body> 

<div id= n main n > 

<hl>Click to reveal your cards</hl> 

<h3 id= n hdrTotal M x/h3> 

<h3 id="hdrResult n x/h3> 

<div id= M my_hand"> 

</div> 

<div id= M controls"> 

<div id="btnDeal"> 

<img src="images/deck small.jpg M > 


f[dd some -fov 
七 he 6oy\*tv"ols. 




</ div> 

<div id=' 

"btnHit n > 

<img 

src="images/deck small. jpg"> 

</div> 

<div id=' 

"btnStick n > 

<img 

src="images/stick small.jpg n > 


</div> 

</div> 

</div> 


^controls{ 

clear : both; 

} 

.current—hand{ 

float : left; 


細 y—hand{ 

clear : both; 

border : lpx solid 
gray; 

height : 250px; 
width : 835px; 


#btnHit, #btnStick, 
#btnRestart{ 

display:none; 

float : left; 


h3 


display : inline; 
padding-right : 40px; 


<script src= M scripts/jquery-1.6.2.min.j s"></script> 
<script src= M scripts/my_scripts.js"></script> 
</body> 

</html> 


} 


1 

index.html 



my—style.css 
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Are there any other types of loops I 
should know about? 

Yes, there are. There’s the while loop, 
which is very similar to the do...while loop, 
except it does its conditional check at the 
start. There’s also a for...in loop, which 
will loop through an object’s properties and 
pull out the value of each one. 



So, I’ve started a loop going. Can I 
stop it in the middle? 

Yes, you can, with a very simple 
command: break. Calling this anywhere 
in your loop will cause the loop to stop and 
proceed to the next piece of code after the loop. 


What’s appendTo? I’ve only seen 
append before. Is there a difference? 

With append, the selector calling the 
method is the container into which the content is 
inserted. With appendTo, on the other hand, 
the content comes before the method, either 
as a selector expression or as HTML markup 
created on the fly, and it is inserted into the 
target container. 



Using the UML diagram given below, create a one-time object called hand. The cards property should be 
a new empty array. The current—total property should be set to 0 (zero). The sumCardTotal 
method should loop through all the cards in the cards property and add their values together, and set this 
number as the value of the cur rent—total property. Then, use the cur rent—total value to set 
the value of the element with the ID of hdrTotal. We’ve started the object code for you. 



hand 


cards 

current total 


sumCardTotal() 
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exercise solution 



f(ci 鉍 
P\ 


PLjiiipH 


Now you’ve got a hand object with a card property (that’s an array) and a function that loops 
through the card array, gets the current card, and updates the current total. 


var hand = { 

cards : hgw Arrsy()' 

current 一 total • 0 , 夺 


Sc-t tavd roferty 
■to be a hcv/ av-v-ay. 

- 

sumCardTotal : function () { Looy thvough -the 

— ⑶七一 Ual 二 0; ^ ^ 

k (會 i=LO;i<*tWisads.l ⑶咖 i++){ 

咖❹妯 ]; W ttc a„a 7 . 

*tWis.6u\rr ⑶七 boia\ +=- “aluc; ^_ > Add ， va | ue 
) 一 ^eni_io-hi 

" w #WrTotamW ( 叮山 I: ” + tWis.du^>tal )； 

R*- — "the "to*tcll 匕 ouh 七 "to 

} sc\recv), ih -the hd\r7o-tal clcmcht 


hand 


cards 

current—total 
sumCardTotal() 




But I don’t see anything there 
that’ll tell me if I won. Won’t 
I just get oil the cards? 


We definitely don 9 t want that. 

Then there will be no way to see who’s 
won. Based on the rules set out in the 
email from the Head First Lounge, we 
have to decide if you won based on 
several different criteria. Let’s have a 
look at those criteria again. 


o If a player’s cards add up to more than 
21, then she is bust and must start again. 
The game is over. 

❺ If a player’s cards add up to exactly 21, 
then she has a blackjack, and the game 


o 


is over. 


If a player’s cards add up to 21 or less, 
but she has already been dealt five cards, 
then the game is over, and she wins. 


o Otherwise, the player can choose to get 
another card or stop playing. 
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decision making time...agam! 

Back in Chapter 3, we looked at using conditional logic to run 
different code based on decisions you want your code to make, given 
information it already has. 

the TV 七命七 

if( myBool 




A JavaS^»\>-t variable // Do Something ! 

}else{ 



TV •切 fW 

fee \rcad as w »s c^al to. 


The toAt y/c "to i-f y/ha 七 
>wc dhcdk -tuinr^s ou*t "to be "t\ruc 


// Otherwise Do something else! 


} 


As it turns out, there’s an additional option for making more than a 
single decision at a time. By combining if and else statements into a 
composite statement called else if, you can check several conditions 
all inside one statement. Let’s take a look. 

TV 七 




if ( myNumber < 


10^ 


// Do Something! 


j\v\oi\\Cr 七 y 
Y/a^*b*to cMttV +ov 




}else if( myNumber > 20 
// Do something else! 
}else{ 


// Finally, Do something even different 


} 



货办〜 _ 

Can you think of where in your code you could use a if / else if / else statement? 
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if this or that, or else! 


Comparison and logical operators 

For conditional logic statements (like if/else or do...while) to work properly, they 
have to be able to make the right decision based on what they are checking for. To 
do this, they use a series of comparison and logical operators to help them make the 
decision. In JavaScript, there are seven different comparison operators and three 
logical operators, as well as a shorthand operator for the if/ else statement, called 
the ternary operator. We’ve seen some of these already, but here’s the full list. 


TVuc J a equals b 


Exact equality 
a === b 


Tv-uc i-P a is c<\ual *to b -fov 
bo-th value by\A -type 


Equality 
a == b 


Inequality 
a != b 


True a docs c'ual b 


Greater thaw or equal to 
a >= b 

Tyruc i-P a has a gveatev 
value thah OK is c^ual -fco b 



Less thaw 
a < b 、 

Tiruc 4 a 心 a lessor 

value *tV^av\ Id 


Greater thaw 
a > b ^ 

TVwe J a a 
yeatev- value ^ 


Less thaw or equal to 
a <= b 



Tiruc i-p 3 has d lessev- value 
xKah OR is io b 


Logical operators 


Negation 

!a 

True 1 -f a *>S ^alsc ov ) 
docs^-b cA 七 (-fov 
POM elcwcvrU) 



And 

a && b 

T\ruc i-P 3 is *t\ruC o\r b is T\ruc i-f a is *t\ruc 如 d b is 

*t\ruc, or i-P both av-c *bruc ， tv-uc, bui r>o*t i-f o^c o\r 

bu*t y\oi i-P both av-c -false ihc oihc\r is -false 
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i^harpen your pencil 


Update your hand object to check if the value of the current_total property 
meets the criteria for the game (go back and check the original email if you 
don’t remember all the rules). Here's the existing object, as well as pieces of the 
new code you need to write. 


var hand = { 

cards : new Array (), 
current—total : 0, 

sumCardTotal : function(){ 
this•current—total = 0; 
for(var i=0;i<this.cards.length;i++){ 
var c = this.cards[i]; 
this•current—total += c.value; 

} 

$("#hdrTotal n ).html("Total: " + this•current—total ); 

if (this._ > 21) { 

$( n #btnStick n ).trigger("click"); 

$( M #hdrResult M ).html("BUST! n ); 

} (this•current 一 total ){ 

$( n #btnStick n ).trigger("click"); 

$( n #hdrResult” ） .html("Blackjack!"); 

}else if( _•current 一 total 21 this.cards.length == 5){ 

$( n #btnStick n ).trigger("click"); 

$( n #hdrResuit") .html("5 card trick! n ); 


// Keep playing! : ) 



my— scripts.js 
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sharpen solution 



You've now updated the sumCardTotal method to include logic 
that checks the value of the dealt hand. There are lots of conditional 
and logical operators in there, even for this simple application. 


var hand = { 

cards : new Array (), 
current—total : 0, 


sumCardTotal : function(){ 
this•current—total = 0; 
for(var i=0;i<this.cards.length;i++){ 
var c = this.cards[i]; 


this.current total += c.value 


$( M #hdrTotal").html("Total : 

if (this.duvrerrt > 21) { 


$( n #btnStick n ).trigger("click" 
$ ( n #hdrResult n ) . html ("BUST!，▼); 
}dsc i-f (this. current total 二二 Zl ) { 


+ this•current—total ); 

2-1- 


Chc^k i-p 乙 u 汁一 *to*ta| 

is -to Z/. 


$( n #btnStick n ).trigger("click"); 

$( n #hdrResult").html("Blackjack!"); 

}else if (•fchis. current total < =1 21 AA this. cards . length == 5) { 
$( n #btnStick n ).trigger("click"); 

$( n #hdrResuit").html("Blackjack - 5 card trick!"); 


}dsg{ 



// Keep playing! : ) 


Mhcirwisc, do ho-thihg/ 


CKctk i-f 

less *tV^ay\ ov- e'ual *to 2J ， 
• ， - ftav-ds Kavc been 



my—scripts.js 
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But we still carVt get at 
these new functions because weve 
got nothing to call them with, right? 

^ --- - 

Yeah, we’re not quite done yet. 

You already have all the pieces in your HTML code for 
dealing the initial cards, asking for another card, and 
ending the game. You just haven’t wired them up yet. 
And don’t forget, you need to call the method to add up 
the card totals each time you deal a new card. 


jQueiy Blackjack Code Magnets - 

Move the magnets to write the code for a function that will add several event listeners to 
the blackjack application. The listeners should be on the elements with the IDs of btnHit 
and btnStick. The btnHit event should deal another card. The other should stop the 
game. Also, call the sumCardTotal method after any card is dealt out. We’ve included 
some code from the end of the hit function for you to update too. 



}while(! 


good—card = false; 
hand. 


0 ; 


$("#btnDeal M ).click( 
deal(); 

$(this).toggle(); 
$ ( n #btnHit n ) ._ 


(){ 


0 ； 


$( n #btnStick n ).toggle(); 


})； 

$(，▼ 


).click( function(){ 


hit(); 


})； 


$( n #btnStick M ).click( function(){ 
$( n #hdrResult") .html(_ 

})； 





I toggle 1 
「 Stick! ， 1 





my—scripts.js 
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jQueiy Blackjack Code Magnets Solution 

This code creates a function that will add several event listeners on the hit and stick 
buttons, and also calls the sumCardTotal method after any card is dealt out. 


peal tw 

tavds 



}while(! 


good—card 


good card = false; 
hand 


sumCardTotal 


0 




Hit OhC da\rd- 


$ (’▼ #btnDeal") . click ( 
deal(); 

$(this)•toggle() ;_ 

$( n #btnHit n )•」 toggle 




$( n #btnStick M ).toggle(); 



•f md a ^ood tav-d- 

ioia\ Jc 
ouv duv-vcht 
^d, ai the 

(){ Chd o-f the hit 
ioh. 

Wide 七 he deal 
button bu-t 

show -the hi*t ov* 
s-tidk bu-t-fco^s. 


#btnHit|_ n ) • click( function(){ 

Set output 
message *to say 


hit() 


}); 

$( n #btnStick n ).click( function(){ ^ 

$( n #hdrResult M ) .html( H ^^i c k] 

”； 




my—scripts.js 


theretc^e no ^ 

Dumb Questi9ns 


Are there any other ways to compare values in 
JavaScript? 

Not compare values, perse, but there is another method used 
to make decisions based on the values of variables. That method is 
called the switch method, and can have many different conditions 
Often, if you find yourself writing large if / else if / else 
statements, a switch statement might be easier. 


You said there was a shortcut for the if/else statement. 
What is it? 

It's called the ternary operator, and it uses a question mark to 
separate the logic operation from the resulting actions, like this: 

a > b ? if_true_code : if_false_code 


244 Chapter 6 





























jquery and javascript 



Tesr DriVq 


Add all the code you’ve just created to your my—scripts.js file, after your hit 
function — including an update to the end of the hit function itself — and 
give it a runthrough in your favorite browser. 


@ 2S 


Htlfi： 1 lliinkii)ueiy.cvrri cli«ptcr06/^lef^3 ' w S C X I 冷 Head First Blade Jack 


Click to reveal your cards 

Total: 20 



? 





赛 









Frank: Not so fast. We still have to add in the reset feature they 
asked for. So, once a game is over, the players can start again without 
reloading the page. 


Joe: We also need to make sure that people aren’t getting cards from 
previous games. We have to be sure we’re removing everything. 

Jim: But how do we do that? We have HTML elements that we added 
dynamically and new items in arrays. We have to clear it all? 

Frank: Yes. We’ll have to use slightly different techniques for each, but 
yes, we have to clear it all. 

Joe: I know just the tricks! For j Query, have a look at the empty 
method. For the arrays, there are a few ways, but not all are cross¬ 
browser. Let’s see what the best options are. 
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a clean slate 


Clearing things up with jQuery... 

Remember back in Chapter 2 when we used the jQuery 
remove method to eliminate a particular element and all its 
child elements from the DOM, never to be seen again? That 
approach is great if you want to remove the parent element. 
However, if you want to keep the main element around and 
you just want to empty out its contents, you can use the j Query 
empty method, which — like remove — requires a selector, but 
will leave the calling element in place. 


( n #my hand” ） .empty() 


T\\t duv-vc^*t 

pay s*tv"ud*tuvc 



..is even easier in JavaScript 


body 

1 

| 

div id= 

: "main" I 


I 

div id=' 

'my hand" | 


Often we find ourselves writing j Query to avoid having to 
write multiple lines of JavaScript. Thankfully, there are a 
few occasions where doing something in JavaScript is as 
easy as it is in j Query, and this is one of those times. While 
the syntax is a little different, the end result is the same and 
you don’t have to keep track of where you are in the DOM. 
To truly empty an array in JavaScript, you simply set its 
length to 0 (zero): 

used—cards•length = 0; 

Things can’t get much easier than that, right? 




Tiic y/c 

y/a 灼七 *to vemove 




So, all we have to do now is 
figure out what needs clearing, 
and were done, right? 


Yes, but the order in which you clear 
stuff is important. 

Since we also have to deal the next hand from a 
restart, we should clear everything first, then deal 
the new hand. We also have to make another 
element clickable to call our code. 
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jquery and javascript 


%|harpen your pencil 

I InH 


Update your index.html file with an element, similar to all the other elements in the 
controls div element. Give the clickable div an ID of btnRestart. Inside the div, 
put an image with a source of restart_small.jpg, from the images folder. 


Also, update your my_scripts.js file with an click event listener for the btnRestart 
element. This should empty the my—hand element, the used—cards array, and the 
cards array in the hand object. It should also toggle a new div element with the IDs 
of result and itself. It should also clear the html of the hdrResult elements. 
Finally, it should toggle and trigger the click event on the btnDeal element. 



<div id= M btnStick n > 

<img src="images/stick_small.jpg"> 
</div> 



index.html 


<div id="_"ximg src="" id="imgResult"> 

</div> 

</div> 

<script src="scripts/jquery-1.6.2.min.j s"></script> 



( M #hdrResult n ).html('Stick!'); 


})； 


( n #btnRestart").click( function() 
_•toggle(); 



my— scripts.js 


$(this) •_ 

$ ("#my_hand M )_. 


$( n #hdrResult").html('*); 

used—cards • _= 0; 

_.length — 0; 

hand._ — 0 ; 


$ ( M #btnDeal") .toggle() 

._( 'click'); 
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sharpen solution 



Now you’ve got a reset button to start the game over, which resets all the elements 
back to what they were before the game started. Add a little JavaScript magic with the 
length property, and you’re good to go. 



<div id= M btnStick"> 

<img src= M images/stick_small.jpg M > 
</div> ^ A v-csc*t bu-t-fcoh "to stolirt 



index.html 


<div id 二 1 ^ 3 arwC ^ 

<“3 srd :、 眯 ays/\rcsta\rt_smalljp3 > 

</ div > 

<div id = M V " CSul * t" ><img src = M " id = M imgResult " ></ div > 

</div> V /\/|akc V-CSiaH ： w>o\TC 

</ div > obvious m iicv " C - 

<script src =" scripts / jquery -1 . 6.2 . min.j s "></ script > 



Reset all 


}) 


$("#hdrResult").html('Stick!') 
$("result").toggle(); 

("#btnRestart").click( function() 

f( w #\resul*t W ) . toggle(); 

$ (this) 

$ ( " #my—hand" ) • Cmf*tyOj 
$("#hdrResult").html(' *); 
used—cards• le—h = o; 

h3hd-£-3\rds . length = 0; 
hand. du\rreh*t *to*tal = 0 ； 



my—scripts.js 




( M #btnDeal") .toggle() 

• ■briber ( 'click'); 


Simulate a didk o*f the 
bthPcal 


}) 
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jquery and javascript 


Tesr DriVq - 

Add a click event for the btnRestart element to your my—scripts.js file. Also, 
don’t forget to include the additional HTML code in your index.html file. 







1 回 S3 

Q 

趕 http:/ thinkjquery.com chaptei06 ； step4 - 

P ▼ 2 <5 x 

jQ Head First Blackjack 

xU 

a w 

liu M W 


Click to reveal your cards 

Total: 29 BUST! 


2 v 2 9. . 9 8 # t 8 10 . . 10 

+ •+ ♦ ^ ♦ ♦ + •+ • •+• + ♦ ♦ ♦ ♦ 
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everyone likes a winner 


Add some extra excitemcwt 

Update your my—scripts.js file with a new end function, which gets called 
by btnStick, and some other updates to the computational logic in 
sumCardTotal. Also, grab the latest my—style.css file here: 
http:/ / thinkjquery.com/ chapter 06 / end/styles/ —style, css. 




if(this.current_total> 21){ 

$("#btnStick").trigger("click"); 

$( n #imgResult n ).attr('src','images/x2.png'); ^ 

$("#hdrResult").html("BUST!") 

.attr('class', 'lose'); 

}else if(this•current—total == 21){ 

$ ( n #btnStick") .trigger("click"); 

$("#imgResult n ).attr('src','images/check.png'); 

$("#hdrResult").html("Blackjack!") 

.attr('class', 'win'); 

}else if(this•current—total <= 21 && this.cards.length == 
$("#btnStick") .trigger("click"); 

$( n #imgResult n ).attr('src','images/check.png'); 

$( n #hdrResult").html("Blackjack - 5 card trick!") 

.attr('class', 'win'); 

}else{} 

$("#hdrTotal").html("Total: " + this.current total ); 


to a 说⑽七 



Set a di-f-fcv-cn-t 

dass -fov- Kcadcv") 

ov\ result 


5) 


function end(){ 

$( n #btnHit n ).toggle(); 

$( n #btnStick n ).toggle(); 

$( n #btnRestart M ).toggle(); 

} 

$ ( n #btnStick") .click( function() \ 
$( M #hdrResult").html('Stick!' 

.attr('class'. 


a« 6o^o\s 

to wd 咖⑭ 


win'); 


$ ( n #result M ) .toggle(); 

end(> ; ^ Call -the Chd -fuh^-tioh -fco Chd 



"the game, you stuik 


my—scripts.js 
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jquery and javascript 




Tesr DriVq 


Update the sumCardTotal method of the hand function in your 
my—scripts.js file. Also, don’t forget to grab the new my_style.css file and 
replace your current one with the new version. 


o 


http thinkjquery.com : hapteiOC end 


P- 8C 




1. I 


Click to reveal your cards 

Total: 22 BUST! 


I o 回 a 

侖 ☆ 0 



^ Awesome! That is 
perfect! Now visitors to the 
Head First Lounge can enjoy a 
good game of blackjack while 
they hang out. 


http thinkjquery.com chapteiOC end 


S C x I 齡 Head hirst Blackjack 


Head First 


Lounae 


Click to reveal your cards 

Total: 21 Blackjack! 
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your jquery and javascript toolbox 



Your jftuery/JavaScript Toolbox 


You've got Chapter 6 under 
your belt and now you've 
added JavaScript objects, 
arrays, and loops to your toolbox. 




to 





Av-v-ays 

avv-ays 

values *to 3v-v-ay 

Addi^ move clcmc^-b *to ^ avv*ay 
cWistm^ av-vay elements 


Loo^s 

U Uooy 
d 。 … YiWk 1 。。？ 

Uoy^al oycyaWs 
Of ⑽ o^r^s 


j^uemy 

•Cmp-ty 
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7 custom functions for custom effects 


幸 

What have you done 

參肴 for me lately?. 



I could really use a 
doHousework function. 


When you combine jQuery’s custom effects 

With JavaScript functions you can make your code — and your web 
app — more efficient, more effective, and more powerful. In this chapter, 
you’ll dig deeper into improving your jQuery effects by handling 
browser events, working with timed functions, and improving the 
organization and reusability of your custom JavaScript functions. 


this is a new chapter 
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uh oh 


A storm is brewing 


The Monster Mashup web app you built in Chapter 5 was a big hit with kids and their 
parents. But it sounds like there might be a bug that’s making the lightning go haywire. 
DoodleStuff’s quality assurance manager contacts you with some issues and a feature 
request for making Monster Mashup better. 


Weve discovered that when a user 
opens a new tab in his browser and leaves Monster 
Mash open in another tab, when he comes back the 
lightning goes off in rapid succession with no pause in 
between. It seems like the app is just going haywire! 


I/Vheh 3 Visi-fcoir stav-ts 
Up /WohS-tc\r Mashup... 


...ahd tKch \rctu\fhS {o the tab the 
Mohstcm /Waskp app is 

"the lijKth'mg goes o-Pf m v^pid 
suddessioh 3s i-p c- (■- 3V"C 

^v*asli'mg ih*to ohC ahothev-. 




Jill, viV^o ^ 

poodlcS-tuW 




Try reproducing the issue. Then think about what’s going 
wrong with the lightning functions. Why do they all crash 
together when someone switches from one tab to another? 
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custom functions 


WcVg created a mowster...fimctiow 


The lightning function we created in Chapter 5 has turned out to be a bit of a 
monster. It runs and runs, even if the user navigates away from the page. When the 
user returns to the tab, the timer has to catch up, and it tries to redraw the lightning 
on screen in rapid succession. It seems that the timer doesn’t work the way we 
wanted it to, so what happened? 


丁 he timout ihtcv-val is ih 

•^illis^ohds. 

function lightning—one(t){ 

$ ( n #lightningl TT ) . fade In (250) . f adeOut (250); 
setTimeout ( TT lightning one () TT , t); 


ov ^ ^ so ov ^ 



I 灼 JavaSdv-ip-t, you -typically 
dc-f mc a -Pu^diio^ a 灼 d dall ii 
sorwcv/hcvc else m -the todt- 
I 灼七 his cast, you 匕 ailed ihc 
灼 -p\rorw msidc rtsdf. 


TV^ setTimeout w>c*tV)od "tells v)S 
*to v~uir\ d -fu\r\d*bior\ 3r\d 七 
y/ait -for a wWile bc-fov-c rurm’nr^ it aja'm. 


In Chapter 5, we needed a way to call the method again and again, with a 
timeout in between those calls. In solving that problem, we unknowingly created 
a new problem: the function continues to run when the window loses the 
visitor’s focus (i.e., when the visitor opens a new tab and moves away from the 
active window). 


A function that runs infinitely 
and \s out of our control? That’s 
complex and scary! How can we get 
control back? 



You have to be very careful with 
functions that call themselves. 

Creating infinite loops can eat up CPU 
resources and crash the visitor’s browser. 
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one object to rule them all 


fret control of timed effects with the window object 

Fortunately, you have a way to get control of your lightning animation using 
JavaScript’s window object. The window object is created every time the visitor 
opens a new window in his browser, and it offers a lot of j Query and JavaScript 
power. In the world of JavaScript, the window object is the global object. In other 
words, window is the topmost object of the JavaScript world. 

The browser The window object 

The JavaS^\ript ir\ic\rf>\rcie^ uses the 
wihdow obje^-t "to \rcp\rcsch-t ah ofeh 
wihdow ih the bvowsev*. 



Let’s say you’ve opened three tabs in your browser. The browser creates one 
window object for each of those tabs. The window object is an object just like 
the ones you worked with in Chapter 6, so it has properties, event handlers, and 
methods. And they’re super handy — we can use the window object’s onblur and 
onf ocus event handlers to find out what the visitor is doing at the browser level. 



I-P you dlidk ot\ 七 iVis 
w'mdovy, bvoy/sev 
yves 'rt w *fodus. w 


N 


Weh you dick Oh Ohc o-f -the 
。七 heir wihdows, -the 
wmdow loses -fodus, ov- w b|uvs. w 


(n/oy/ wmdoy/ i^3s -fotus. 


The window object also offers timer 
methods that you can leverage for running 
your custom timed functions, window has 
many more methods, but these are the ones 
we need to use to fix the lightning functions. 



Watch it! 


Don’t confuse the 
JavaScript window object’s 
onblur and onfocus event 
handlers with jQuery’s 
blur and focus methods. 


The jQuery blur and focus methods are 
intended to be attached to HTML form fields 
and other elements but not the window object. 
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custom functions 


♦ 






O 办轚 




Match each property, event handler, or method for the window 
object to what it does. 


window.name 


window.history 


window.document 


Detects when the window receives a 
click, keyboard input, or some other 
kind of input. 

A property of the window object 
that refers to the main content of the 
loaded document. 

Detects when the window loses focus. 


window.onfocus 


window.setTimeout() 


window.clearTimeout () 


window.setlnterval() 


window.clearInterval() 


window.onblur 


A method of the window object used 
to set a period of time to wait before 
calling a function or other statement. 

A method of the window object used 
to cancel the period of time to wait 
between repetitions. 

A method of the window object 
used to set a period of time to wait 
between repetitions of a function call 
or other statement. 

A property of the window object that 
lets you access the different URLs that 
the window has loaded over time. 

A method of the window object used 
to cancel the period of time to wait. 

A property of the window object that 
lets us access or set the name of the 
window. 
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who does what solution 






Detects when the window receives a 
click, keyboard input, or some other 
kind of input. 

A property of the window object 
that refers to the main content of the 
loaded document. 

Detects when the window loses focus. 


A method of the window object used 
to set a period of time to wait before 
calling a function or other statement. 

A method of the window object used 
to cancel the period of time to wait 
between repetitions. 

A method of the window object 
used to set a period of time to wait 
between repetitions of a function call 
or other statement. 

A property of the window object that 
lets you access the different URLs that 
the window has loaded over time. 

A method of the window object used 
to cancel the period of time to wait. 

A property of the window object that 
lets us access or set the name of the 
window. 





The window object’s onf ocus and onblur event handlers can detect a change 
to the window’s focus, but what can you do in response to those events? 
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custom functions 


Respond to browser cvcwts with onblur and onfocus 

So we know that with window. onf ocus, you can tell when the window gains 
focus (i.e., a visitor activates the page or directs mouse or keyboard input to the 
window), and with window. onblur, you can tell when the active browser 
window loses focus. But what can you do in response to these events? You can 
assign a function reference to onfocus or onblur. 





七 •，抓 


window.onblur = blurResponse; 


丁1^ dssi^hmch't 
opClra-to^ 

window.onfocus = 


Fuhdtioh 

focusResponse; 


^ function blurResponse () { function focusResponse () { 

[} - The stuK you waht 

do ih \TCSpohSC {o the 
b\rov/sc\r cvcht goes hcv-c. 



Fuh^-f ： ioh 

dc-Pihi-tioh 


And here’s where the power of writing your own custom functions really starts to 
come into play. Now you’ve got a window object that gives you a ton of information 
about what your user is doing in the browser, and you can assign your own custom 
functions based on what that object tells you. So, really, you can do just about 
anything you want, as long as you can write your own custom function for it … 




Tesr DriVq 


Let’s test-drive the window object’s onfocus and onblur event handlers. In the 
code files you downloaded for Chapter 7, you’ll find a folder called window jester. Open 
the window_tester.html file in that folder in your favorite browser. Open a second tab and 
play with clicking between the two browser windows. 
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test drive 



Tesr DriVq 


Here’s what you should see when you open the window_tester.html file, 
open a second tab, and switch between the two windows by clicking on 
them alternately. 



Using the information you get from the window object, you can 
stop the lightning when the visitor wanders away from the 
Monster Mashup window and then restart it when she returns. 
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custom functions 



jQueiy Magnets 

Put the code magnets in the right order to assign function definitions to the onblur and 
onfocus handlers. One function definition will stop the lightning when the browser loses 
focus (call this one stopLightning). The other function definition will start the lightning back 
up when the browser regains focus (call this one goLightning). You won’t write the code for 
the functions just yet, so for now, just put the magnets with comments (starting with //) inside 
each function. 


//code for starting lightning 


l3 





□ 




□因 




//code for stopping lightning 
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jquery magnets solution 



jQueiy Magnets Solution 

Now you’re ready to go with function declarations for both window object event handlers. 




□ 


goLightning; 


] 


function stopLightning () { 





//code for starting lightning 




Ass 吵铣 c ^ 

Wmdov/ o^W 


A 妁 Cw -Puh^tioh "fco 

s "top the lighth'mg 
whch called 


h 灼 cv/ "fco 

你 ake 七 he liglvb/mg 

s*ta\r 七 when called 



But those are just comments inside 
the functions. The functions need to do 
something! Should we just copy and paste 
the timed lightning functions in there? 


Right. The functions don’t do anything...yet. 

Instead of copying and pasting our old code, let’s look at 
one of the window object’s methods — a timer method — 
that might give us a better way of handling the timing effects 
for the lightning. 
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custom functions 


Timer methods tell your fuwetiows when to ruw 


Both JavaScript and j Query offer us timer methods that call functions to run based on time 
passing. JavaScript’s window object has four timer methods for timed control: setTimeout, 
clear Timeout, set Interval, and clear Interval. jQuery offers us the delay 
method. Let’s take a closer look at these methods and what they offer us. 


JavaScript timer methods 


setTimeout 

Use me when 
you want to set 
a period of time to 
wait until telling a 
function to run. 


setTimeout(myFunction, 4000) 


丁 he 

6dll 

has passed 


dclsy fi h 
•^illisedoyids) 



arpen your pencil 


setlnterval 



0 O 


I tell a 
function to run 
repetitively with 
an interval of time 
between each 
repetition. 


setlnterval(repeatMe, 1000) 


-fuh^-tioh 
io v-cpcat 

C 把 h 

i^-tcirval is up. 



TV^C m-tev-val o( 
bcW ⑶ 

Cm w'»IV»sc6o^ds) 


jQucry's delay method 


delay 



I add a pause 
between effects 
that are queued 
up in a chain of 
effects. 


slideDown() . delay(5000) .slideUp(); 


tWis dUm 

vuv^s, its — 朽 

•m \6 ^ucv 7 as 




lr> 七 his example, ihc 
delay me 七 hod pu-U B 
(\yJC-stCoY\d pause m 
between 七 he slideUp 
slideDown c-Pfcdts- 


Which of these timer methods will work best for fixing the goLightning 
function? For each timer method, answer whether it will help and explain why you 
chose or didn’t choose it. 


Timer 

Should we 
use it? 

Why? 

setTimeout 



setlnterval 



delay 
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Which of these timer methods will work best for fixing the lightning function? 
Here are our answers. 


sharpen solution 



en your pencil 
Solution 


Timer 

Should 
we use it? 

Why? 

setTimeout 

No 

The sc*tTimcou*t method is 'm-te^dcd -for situations y/Kcrc you *to y/3i*t 

3 spedi-fid amouh*t o-f ■tiw'C bc-forc \rurmmg a -fuhd*tioy\. 

setlnterval 


The sc*tU*tcv-val method is spcdi-fidally *m*tcr\dcd -for situations where you 
y/3h*t 3 -fuhd*tioh *bo vun oh a vcpcatmj schedule- Thats you ^eed *thc 

*bo do. 

delay 

No 

The deldy mrthod y/orks well -for sc^uchdcd c-f-fcd-ts, bu*t i*t hds y\o 
medhahism -for ruhh*m^ oy\ a rcpcatm^ schedule- 


O O 




So setlnterval will be the best solution 
for the goLightning function, but the 
stopLightning function needs to stop the timer. 
Will the clearlnterval method do that for us? 




Great question! 

You can use the clearlnterval method to stop 
the repeating schedule of function calls created by 
setlnterval. To do so, you need to pass a variable 
to clearlnterval as a parameter. Let’s take a 
closer look at how that works. 

Ass, a 从 a 七 

mylnterval = setlnterval(repeatMe, 


1000 ) 



clearlnterval(mylnterval) 


T? ⑽ I method tells ihc 
sctUc^l io wipc oui iis ahd 

stops 七 he lrcpcatihg acht 


Pass -the vav-iablc -to 
^U^val as a 


iOh. 
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custom functions 


there^are no o 

Dumb Questi9ns 


Do all browsers process the setTimeout 
method the same way? 

No. Mozilla Firefox and Google Chrome display the 
behavior we encountered earlier (stacking up the function 
calls). Internet Explorer 9 keeps calling the function as it 
was intended from Chapter 5. This shows that not just web 
designers have issues with cross-browser compatibility. 


Can the timing functions likeO setinterval 
and setTimeout be used with things other than the 
window object? 

That’s a great question. Unfortunately, they can’t. 
They are specific methods of the window object, and can 
only be called in reference to the window object. They 
can, however, be called without the prefix “window,” and the 
browser will know you intend for this to be attached to the 
current window object. It’s good practice to include the 
prefix, though. 


♦ 




+ ^ + 


Match each timer method to what it does when it runs. 


window•clearlnterval(inti); 


window.onfocus = goLightning, 


setTimeout(wakeUp() , 4 000); 


Detects when the current 
window gains focus and calls the 
goLightning method. 

Sets the lightning_one function 
to run every four seconds and assigns 
it to the variable inti. 


$ ( "^container #lightningl"). 
fadeln(250) .delay(5000) .fadeOut(250) 


Detects when the current window loses 
focus and calls the stopLightning 
function. 


inti = setinterval( function() 
lightning_one(); 

}, 一 
4000 


window.onblur = stopLightning; 


Wipes out the timer and stops the 
repeating setinterval for inti. 

Sets a four-second wait before calling 
a function named wakeUp. 

Creates a five-second pause between a 
fade In and fadeOut effect. 
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who does what solution 


♦ 






备 O 免轚 


Match each timer method to what it does when it runs. 






window•clearlnterval(inti); 


window.onfocus = goLightning 


setTimeout(wakeUp (), 4000); 


$ ( "^container #lightningl"). 
fadeln(250).delay(5000).fadeOut(250) 


inti = setlnterval( function() 
lightning_one(); 

}, _ 

4000 


window.onblur = stopLightning; 



Detects when the current window gains 
focus and calls the goLightning method. 

Sets the lightning_one function to 
run every four seconds and assigns it to 
the variable inti. 


Detects when the current window loses 
focus and calls the stopLightning 
function. 

Wipes out the timer and stops the 
repeating setlnterval for inti. 


Sets a four-second wait before calling a 
function named wakeUp. 


Creates a five-second pause between a 
fade In and fadeOut effect. 


Write the stopUghtHmg awd goLight^mg fuwetiows 


Now that you know more about timer methods, let’s review where we need them. 


goLightning(); 


window.onblur = 



stopLightning; 


loads- 


Call ^ WW 如 

i\, t Wov/scv loses ^odus. 


window. onf ocus = goLightning; ^ - ~ Call 

*tV>c bvoy/sev- -rodus. 


function 
// code 


stopLightning (){ 
for stopping lightning 



C\ta>T timers -fov- -the li#*Unr^ 
'micv^vals. 1/Vlc Y\ttd 七 kee dlea 士七 e\n/als 
Kcvc- ^r>o>w v/hy? 


function 
// code 


goLightning (){ 

for starting lightning 



^ _ 义七 thvee tirwc\rs -poV" -the -fclurcc 

七 hi 吒 ihlcirvals. Ahd yep, wc heed 

-Xblfgc sctlhtcwals hcvc. 
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custom functions 



For each blank line in the file, write in the variable, function, or method that will help fix the 
Monster Mashup app. When in doubt, look at the previous two pages for guidance. We’ve 
done a few for you. 


goLightning(); 

window.onblur = stopLightning, 
window.onfocus = goLightning; 
var inti, int2, int3 ; 
function goLightning(){ 


m*tl 


function() 


4000 


..=.(function () 

}, . 

5000 

= (function() 

}, . 

7000 


function stopLightning() 
{ 


window. 

( ih*tl ) 

window. 

.(.). 

window. 

( ) 


function Ii Q hg() { 

$ ( "^container #iightningl") .fadeln(250) .fadeOut(250) 


function { 

$ ( "^container #lightning2") .fadeln(250) .fadeOut(250) 


function . { 

$ ( "^container #lightning3") .fadeln(250) .fadeOut(250) 




my—scripts.js 
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exercise solution 



SpLjiilpH 


Now you’ve got two custom functions—each with references to the lightning functions you wrote back 
in Chapter 5—that respond to the window object’s onfocus and onblur events. 


}, 

4000 


goLightning(); 

window.onblur = stopLightning; 
window.onfocus = goLightning; 
var inti, int2, int3 ; 
function goLightning(){ 

.•. = 女 (” 大 ?! function () 

fW, you dall the 

function () { 

七 >woO; 4 ^ 

A^d r 

)• 七咖 

m*(3 = sc'tl^'tcv'val ( function () 

Jooo.V 


Dcdla\rc th\rcc v^H^bles -fov- 
V*CrwCrwbc\rihg ou\r tirwev-s so -fchc 
b\rowsc\r t\t^ them a^. 


}, 

5000 



Set thvee di-P-Pcv-Cht tirwevs (o\r the 
"thiree lighthihg ihtcv-vals. 


IWall ^ 


function stopLightning() 

{ 

window. dlcar|h*tc\rval ( i” 女 I ); 
window .dcaVJh*tc\ryal ' 
window. dlcarlhtcv-va) ( \y\il > )； 


Clcav* *thc *t*imcv*s -fov 
-tiivcc Ii^vbr>m3 *m*tcv-vals. 


function Q hgO { 

$( n #container #lightningl n ).fadeIn(250).fadeOut(250); 

I 

function I 吵七 h.mfbwoO { \ ^ uv " 仏 … liplithihg 

$ ( "^container #lightning2 " ) . fade In (250) . fadeOut (250) ; I ^ Uh ^"t |0h dc-rihition 


function 'fchvggO { 

$ (▼，# container #lightning3 n ) . fade In (250) . fadeOut (250); 
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custom functions 



this! 

♦ 



You’ll be updating a bunch of code to fix and improve on what you built in Chapter 5, 
so let’s start with a blank script file. The code files you downloaded for this book contain 
a folder for Chapter 7. In the folder, you’ll find a begin folder structured like this: 



begin 




Wm 

y c 

j| Q 

」 


images index.html scripts styles 



Once you’ve added the code from the previous page to the script file, open 
the page up in your favorite browser to see if your lightning effect fix was 



successful. 


OfCh up /i/Iohstc\r /1/IasUf 
3 b\rov/sc\r window. 


o\>er\ a bv-ov/scv- 
tab ar\d stay on ihc tab 

-foV" 3 -few m’mu*tcs. 


丁代 tuirh "to tk 

Ub the Alohstcv- Alaskup app 

IS 浐⑼灼 … 3 you \rctuv-h, 

七 he should ho 七 

be H should s-tavt up 

^ic\r -fouv sedohds. 
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cleaning up our functions 


Since were fixing stuff, shouldn’t we 
go back and fix those repetitive functions 
we built in Chapter 5? 


Great idea. We have a bunch of click-related functions for that 
face that we could likely combine into one multipurpose function. 



A daia sWW 

thai hahd,cs v^iab| cs . 


var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix 



Car\ you 

OY\C <uir\^loy\ 
y/'lll y/OV"k -foV" 
o-f -tV^csc? 


$( n #head M ).click(function(){ 
if (headclix < 9) { 

$( n #head").animate({left : 
headclix+=l; 

} 

else { 

$( n #head").animate({left : 
headclix = 0; 


:367px n }, 500) 


Opx ， },500); 



( n #eyes").click(function(){ 
if (eyeclix < 9) { 

$( n #eyes n ).animate({left : 
eyeclix+=l; 

} 

else { 

$( n #eyes").animate({left : 
eyeclix = 0; 

} 


( n #nose n ) .click(function () { 
if (noseclix < 9){ 

$ ( n #nose") .animate({left : 
noseclix+=l; 

} 

else { 

$ ( n #nose n ) .animate({left : 
noseclix = 0; 

} 

});//end click 

( n #mouth M ).click(function(){ 
if (mouthclix < 9) { 

$( n #mouth n ).animate({left 
mouthclix+=l; 

} 

else { 

$( n #mouth n ).animate({left 
mouthclix = 0; 

})',//end click 


:367px"}, 500) 


Opx"},500); 


:367px n }, 500) 


0px n },500); 


: 367px" } , 500); 


Opx"},500); 
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custom functions 



jQueiy Magnets 

From the previous page, identify which snippets of code are common to all of the different aspects of 
the application. Use the magnets below to create a generic function, called moveMe, that will be called 
whenever a user clicks on any of the moveable images. For the moveMe function, the first parameter is the 
corresponding index in the clix array, and the second is a reference to whatever was clicked. 



var clix = 


// head,eyes,nose,mouth 


$( n #head n )•click( function() { 

});//end click function 
$("#eyes")•click( function(){ 


} );//end click function 




$("#nose")•click( function(){ 


I obj I 


});//end click function 


moveMe(3, this); 


$( n #mouth") .click( function (){ 


clix[i] 


});//end click function 


function moveMe( 


[ 0 , 0 , 0 , 0 ] 


){ 



if 


< 9) 


}else{ 


$ (obj) .animate({left : "- =367px n }, 500); 
clix [i] = clix[i]+1; 

clix[i] = 0; 

$ (_ ) • animate({left : "0px n }, 500); 



my—scripts.js 
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jquery magnets solution 



jQueiy Magnets Solution 


Now that you’ve got one reusable function that leverages an array, you’ll have less code to 
maintain, and it will be easier to track down and debug any issues you might run into. 


- V _^ - 


var clix = 

[o,o,o,o] [_ 


Ar 



$( n #head n ) .click ( function () 


moveMe(0, this) 


});//end click function 


$( n #eyes") .click( function () 


moveMe (l r this) 


} );//end click function 

$("#nose" )•click( function () { 

I moveMe (2 r this )； | 

});//end click function 

$( n #mouth n ).click( function(){ 


. A L.H j av-v-ay 

helps Cdohorhiic youv- todt. 

■ )u f>dss moveMe 於 a 

*to slo 七 * PoV" 七 he £>1 '以 

avv-ay. Th ⑶ you ta” use slot 
*bo keep ■tv'dtk <Jc \\o^j mar\y 

ed 匕 £.li£-kcd- 


>u slso p3ss "the rwovcAle 
七 he objedi so 七 hai i 七 cav\ 

be d^imd'ted- 


moveMe(3, this); 


});//end click function 


function moveMe( 


, obj I : 




if 


clix[i] 


< 9) { 


$ (obj) .animate({left : n -=367px"}, 50 0) 
clix[i] = clix[i]+1; 


}else{ 


clix[i] 
$ (_ obj 


= 0; 

).animate({left : n 0px n },500); 


Tiic vcpctitwc 
lo^i£> you had 
bc-fovc is y\oy/ m 
OY\t pladc, 
makes rb easier -to 
-fi% i-f sowtiVnr^ 
^oes y/\ror\^. 
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custom functions 


Tesr DriVq 


Add the code from the magnets exercise on the previous page to your my—scripts.js 
file and save it. Then, open up the index.html page in your favorite browser to make 
sure your function rewrite didn’t introduce any problems when all the various face 
parts are clicked. 


eeo 



ISI 

+ 

|e N 





TV>c Mashup pay should ^ 七 look 
av>y bc-fovc, bu 七 

you’ll kr>o>w youv todt is 
C 以 16 ⑼七 , less v-cfctrt'ivc, ar>d 
C3SICV- *to rna'm*tam- 


move 
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lightning can strike twice 


Feature request for Monster Mashup 


Jill and the QA team are really happy with your fixes, and since 
they like your work, they want to pass along a feature request for 
Monster Mashup from the product team. 





«!«■-dkMng on I 


Weve had several requests 
from kids who want a button that will 
create a random monster face. Can you 
build that into the app, along with a way 
to start over from the beginning again? 


I like the monster 
faces I make, but it 
would be fun to see the 
computer mix them all 
up for me. 
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custom functions 


Lefs get (more) random 


You’ve been building random functions throughout the book, so you’re likely a pro at that by 
now. In this case, you need to create a function that randomly animates the monster faces. 
Let’s divide and conquer the problem by breaking it down into smaller steps. Let’s start with 
figuring out the current position for each image strip. 

/ ou ^ io k«p i^k o( 


the 匕針 position -Pov 

r L ° hstc,r ^ Ui l s say 

thc V 'S'W is oh this ©he. 



TV^ position is i\\t of c\\cMs 

multiplied by -tKc distal beW ⑶ 

OT pixels). Fo\r ouv 
七 fositioh is 2- ^ f 士乩 is 供 . 




From the current position, we need to figure out the target position, which is essentially a 
random position on the screen. It helps to think of this in two parts: 


❶ Set a random number. 


❺ 


广 HevVs y/V^3*t did ^ 2- 

ar\d ^ -to a \rar\dom 


var my num = Math.floor((Math.random()*5) + 5); 



Bu*b y\ov/ v/c r\ccd 3 ^uw'bcv" bc*bwccr\ 

I ar^d \0 (because tacM mo^stev strip 
has 10 mo^stev (au parb). 


Move each face part to a random 
position based on that random number 

Pov* cac\) rho^s-tev -fade pav-t you heed -to 
rwovc it "to "thc.v*3hdorw position rvtul'biplicd by 
the wid-th o( e 沉 h oy\ taeM s-tv-ip. Fov a 
v-a^dorn >r>uimbc\r o( 1, -the -bv-get Position is 7 
^ which is 



0 


Um y you sure make that sound 
easy, but isn’t getting the current 
position kind of tricky? How do we know 
where the face position is on the strip, 
especially if someone has already moved 
them around? 



It’s not as hard as you think. 

In fact, just turn the page to find out how. 
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the more you know... 


You already know the current position... 

Fortunately, you don’t have to come up with all new variables or functions here. The index 
value of the clix array provides the current position because it tells us how many times 
the user has clicked on each monster face part. So all you need is one line of code: 


Set i\\t position *to 

i\\t value o-f - var current position = clix [index]; 


..and the getRandom function too 

We built a function for getting random numbers in Chapters 2, 3, and 6. 
We can reuse that function here with minimal tweaks. 



function getRandom(num){ 

var my_random_num = Math.floor(Math•random()*num); 
return my random num; 


You f>dss a 3 s *to 



… "to vetuv-h a 

whole K>umbc\r. ttc\rc, we d get 
a ^urwbcv- between O dhd 10. 


By rnultiflymj Matii^ra^dom 
七 number passed as mput, you 
a r\umbcv" bc*bwccr\ 0 
3 y\d y/i^a*tcvc\r value o-f i\\t 
y\um V3\ri3blc is. 


o Set your variable and pass it to the function ： 

Passihg a value num = 10; 

"to the -Puhdtioh getRandom (num); 



❺ Here's the core operation of the function ： 

Some -folks y/ould rc-fcv *to tV^is as d utilit/ 

It does one ar^d docs it <11. 

var my—random_num = Math.floor(Math.random()^num); 

❺ And the result (or output) of the function ： 

return my_random_num; Some -folks \rc-fc\r *to ” 

— — ^ v-c*buvir\ values as ^ettev-s 

because jc*b you a value. 

Next up: the target_j>osition (i.e_，the random 
face part) we want to slide to. 
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custom functions 



Add the bolded code to your index.html and my_scripts.js files. This will get 
your randomize function set up, along with some alerts that will show you the 
target position (which uses a random number) and the current position (which 
is determined by the number of times the visitor clicked). 


<header id= M top"> . n . . , p 

_\/ou Y\ttd some buttons -Vov 

<img src=-images/Monster_Mashup.png- /> ^ Ytsti b^aviov-s. 

〈button id= n btnRandom">Randomize</button> 

〈button id= M btnReset M >Reset</button> 

<p>Make your own monster face by clicking on the picture.</p> 

</header> 


index.html 



var w = 367; //width of the face strip 

var m = 10; //number of the monster face strip we're on 


$("#btnRandom n ).click( randomize ); 
$("#btnReset M ).click(); 


function getRandom(num){ 



var my random num 

=Math, floor (Math. random() *num); 


return my random num; 



} Ra^dom'izjC ... ± 

function randomize () { ^ ^ ^ 

$(".face").each(function(index){ y 

var target position = getRandom(m) ; Update ^lixfihdcxJ so the usev- 

^ y W still di 吐铋 tk 

var currentj>osition = clix [index] ; J htc pa^ts. 

clix[index] = target_position; ^ 

. . . ...* -to the \r3hdo 你 

Var m ° Ve - t0 = target.pos.t.on w;^ position multiplied by the width 

$ (this) .animate ({left: n - = n +move_to+ n px n },500); o-f the fau sedtiohs. 

} ) ' youV fi.us*tom animation 

}' Code. *to move *tV^C s*tv"if 

Ic-ft 



my—scripts.js 
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test drive 



Tesr DriVq 


After entering the code from the previous page to your files, open up the index.html page 
in your favorite browser to test the randomize function. Click the Randomize 
button 10 to 20 times to make sure you do a full test. 


The randomizer works 







0y\ tiiC -fivs*t -few 
c\\cVs, var\dom'iz^\r 
docs you 
asked i*b *to do. 



for the first few clicks 


A-Ptcv a -Pew di^ks, -the 

keeps doiha 
what you asked it 匕 da 
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custom functions 



We didn’t code it to make the 
faces parts go blank. We set it to go 
to a random position! Did we go too 
far somehow? 


You’re right. 

Those custom functions had unintended effects, but 
they likely did exactly what we wrote in the code. Let’s 
have a look at what we might not have thought about. 


Tk staWW •，如 H 

uscv- see nrjs.de the 

I 七 ， s ymc w oW 仏 c 护 d, so *to s ? cak * 


$(this).animate({left : -= n +move to+ n px n 


},500); 


Help! We fell off 
our picture frame! 


Idhe usev keeps didemg the Rd^domiz^ 
bu"t"tor>, i*t eventually pushes -the s-tvip 

so -Cav- h> the Ic-ft, it woh^t dppedv* oy\ 
s^vcch a^ymovc. 


0 




e 办费 e 它 n 

What do you need to do to keep the image strip 
from going off the grid, and instead landing on a 
random monster face part? 
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from where to there? 


Move relative to the current position 

To keep the image strip from going off the grid — but still falling correctly on a random 
monster face part — you need to move it relative to the current position : which means 
including the current position and some conditional logic. Let’s break it down. 

LcVs say Vertov is cm tWis o 於 . Tk position is i 

V ：—because i\\t visi-tov lias c\\cktd 



Then the user clicks on the Randomize button, which comes up with a random number 
between 0 and 9. Let’s look at two different scenarios that could happen as a result. 


Scenario 1: target > current 


The getRandom function returns a value of 5. So the target_position 
variable gets set to 5, which means that it’s greater than the current_position 
variable. We need to write conditional logic to handle this situation. 


0 


1 



TKc duVV"C^*t -- po s, t , o\r\ is 1- 


T\\t "tavyb 一 fos •• 七 is 今 . 


3 


4 


5 


6 


Hov/ md^Y pos>*t*>oir\s do v/c 
have *to move 

Sulrbra^t tu\r\rc^"t__posi*tio^ 

you jrt Wc y\ttA ho move 
ihvee positions -fco -the Ic-ft 


l-P 七 he *tav-^c*t_pos"rti oy\ vaviable 

*to subtv-adt du\r\rCir>i_pos*itioir> 

s 七 vif 七 0 七 he 七 us*m^ ahim 

Scenario Z: target < current 

The getRandom function returns a value of 1. The target_position variable 
is 1, which means that it’s less than the current_position variable. Based on the 
conditional logic from Scenario 1, can you figure out what logic you need here? 

T\\t *bavyt 一 fosi 七 is I • duV^T ⑼七一 fosi 七 ioir\ is 1. 


8 9 

tuvvcjr>*t_pos*it»ov>, you 

position dir>di rwovc 七 he 


•is yea 七 ev~ *tV>av> xV 
\ oy \ -tvom 七」 f 


0 


1 



3 


4 


5 


6 


7 


8 


9 


Subtira^-t tairgc-t^posi-tioh 
Wovn ^uinrch-tjosi-tioh, a h d 

you get /. You heed -to move 
° hC posi-tioh -to -the Hghi 


七 he 


\(i^ variable ,s less^a,^ yo, 

sub^l _ 

imay sbr\Y bo r 吵七 七：十一 .. 
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custom functions 




I Puzz]e 


00 

Your job is to take code snippets from the pool and place them into 
the blank lines in the code. You may not use the same snippet 
more than once, and you won’t need to use all the snippets. 
Your goal is to make the randomizer function work the way it is 
intended to, so parts of the face doesn’t go blank. 


var w = 367; 
var m = 10; 

function getRandom(num){ 

var my_random_num = Math.floor(Math.random()*num); 
return my_random_num; 

} ~ ~ 
function randomize(){ 

$ (".face") . { 

var target—position = getRandom(m); 

var current_position = clix[index]; 
clix[index] = target position; 


if ( 


var move_to =( 

$ (this) .animate( 

}else if( 

var move_to =( 

$ (this) .animate( 

}else{ 

// They are the same - Don't move it 


){ 


-k 


W, 


-k 


W, 


})； 


Note: each thing from 
the pool can only be 
used once! 
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pool puzzle solution 



Paa] puzz]c 


Your job is to take code snippets from the pool and place them into 
the blank lines in the code. You may not use the same snippet 
more than once, and you won’t need to use all the snippets. 
Your goal is to make the randomizer function work the way it 
is intended to, so parts of the face doesn’t go blank. 


var w 
var m 


367; 

10 ; 


function getRandom(num){ 

var my_random—num = Math•floor(Math•random()*num); 
return my random num; 


Rur\ -folloy/'m^ CoAt 

-fov- 七 ha 七 s a 


function randomize() 

$ (” • face") •. 喊 ^4—0 •”扣 

var target—position = getRandom(m); 

"the tclv-gctjosi-tioh vavidble is var current_position = clix[index]; 

-the ^uv\rCh"t__posi-tioh... clix [index] = target—position; 

...subVa^t 

一 声 廣 4* D^Cl*Tlrty\. = V I • f • I 、 r 

if ( Position > duvrcht Position ) { 

. m 甲 1 . . I M . 

々 Ife ihe skr\y {p jhe ^ 二 ^ var move to = ( ... . r . .^rircni^posiiior) , 

That wc ^ccd "to $ (this) . animate ( •. .{lef 士 wove: 二 *to 士 ”〆 }.,500. ) 

USC ah，rir ' a t C 一一 • }else if ( -tar^e-tjposi-tioh < duV-V-Ch*t_Jposi*tioy\ ) { 

|*f "the "tav^e 七一 position vavia^le / v ar move —to = ( dur\rcr\*t position - -taro^rt position 

― 工， 七一― 二 (thiS) * animate (… ■ 地、挪 … 

duvreh 七 position artd • 广 }else{ 

• .^ovc -the image stHp -to -the Hght " They are the same - Don，t move 土七 . 

丁 ha 七 rnOhS WC Y\tt& "(jo use } 

ahimate([I^Pt:N ■二 ”... 


女 


W ； 


女 


W ； 


}) 



You did 灼’七 
iiicsc sy\\ PP C ^- 
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custom functions 


The randomizer is working great now. 
I assume well need another custom 
function to reset everything, right? 


O 


Exactly. 

Remember that reset button in the index.html file 
a few pages back? Now you just need to wire it 
up to a custom reset function. 




jQueiy Magnets 


Put the code magnets in proper order to write the code for the reset button 
and build your custom reset function. We’ve done some of them for you. 


$ ( n #btnReset ， ' ） .click( reset ); 


function reset(){ 
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jquery magnets solution 


// 



jQueiy Magnets Solution 


And voila! Just a couple of quick lines puts everything back in place to start over. 



I/Vive vf v-csct 〜 

-to reset but*to» 


function reset。{ | 


^c-Pihc -the dus-to^ 
-Puh^ioh. 





cadh so that the 
-Puhdtioh \rcscts 
-fade sc^tioh to O. 


clix[index] = 0; 


Reset tV^c c\\% a^ay *b> O. 


$ (this) I . animate ({left^:^'Qpx'M f 500) ; | ‘ 




Rewmdi »w»a^c 
s*tv-*i\> by sett” ••七 *to 
dh absolute position 
o-f 0 ^ov *tV^c CSS 

\t(i ^oper-ty. 


□ 



esti9ns 


Do all browsers have the window 
object? 

Yes, all modern browsers have a 
window object you can interact with. Each 
window object, per tab on your browser, 
will also have a separate document object, 
into which your web page will get loaded. 


So, why do I have to move relative 
to the current position? Can’t I just move 
to wherever the random number tells me 
to go? 

That could work, except you’d have 
to reset your image back to the starting 
position, and then move it to wherever the 
random function says to move it to. That’ll 
double the amount of code you’ll have to 
write and maintain, and will slow down your 
application considerably. 


How does the reset function 

work? 

A: The reset function simply loops 
through each element with the class of face 
and sets its left CSS property to 0. It sets 
each item in the clix array to be 0 as well- 
just as it was when we loaded the page. 


284 


Chapter 7 







































custom functions 



Da this! ^ 

命 


Below, you’ll find all the code you’ve built in the last few pages. If you 
haven’t done so already, add the bolded code to your my—scripts.js file 
and get ready to test all the new functionality you’ve built. 


var w = 367; //width of the face strip 

var m = 10; // number of the monster face strip we're on 
$( n #btnRandom M ).click( randomize ); 

$("#btnReset").click( reset ); 


function getRandom(num){ 

var my_random_num = Math.floor(Math.random()*num); 
return my_random_num; 


function randomize(){ 

$( M .face").each(function(index){ 


var target 一 position = 

getRandom (m); 

var current—position 

=clix[index]; 


clix [index] = targe t_j>osition ; 

if ( target_j>osition > current_j>osition ) { 

var move_to = (target_position - current_position) * w; 



$(this).animate({left : n -= M +move to+ n px"} 

,500); 


}else if ( target_j>osition < current_j>osition ) { 




var move to = (current_jposition - target_position) * w; 


$ (this) • animate ({left :'▼+=，'+move to+ n px" } 

,500); 



}else{ 

// They are the same - Don't move it. 



function reset(){ 

$( M .face").each(function(index){ 
clix[index] = 0; 

$(this).animate({left: n 0px n },500); 

})； 



my—scripts.js 
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nice work! 



Tqst DriVQ 


After entering the code from the previous page, open the index.html page up in your 
favorite browser to test the randomize and reset functions. Click the Randomize 
button 10 to 20 times to make sure you do a full test. Click the reset button 
intermittently too to make sure that’s also working how you want it to. 


It all works! 


eee 

: rnn rn 77 



"The -fade sed-ti 


lOhS 


should *Ply both Hght ahd Ic-Pt 
how, whidh adds eveh mo 代 ^ 

visual -Po\r you\r uscv~s. 


Ahd the ircsct buttoh 
pts badk io 

the way i-t si 3 \ricd. 
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jc^uepycross 


It’s time to sit back and give your left brain 
something to do. It’s your standard crossword; 
all of the solution words are from this chapter. 



Across 

6. Tells a function to run repeatedly with an interval of time 
between each repetition. 

7. JavaScript event handler that detects when the window loses 
focus. 

9. A JavaScript method used to cancel the period of time to wait 
between repetitions. 

10. Used to "pass" variables or objects to a function. Hint: Think 
parentheses. 

11. jQuery method that adds a pause between effects in a 
method chain. 


Down 

1. Event handler that detects when the window receives a click, 
keyboard input, or some other kind of input. 

2. Functions that return values are sometimes referred to as 
_functions. 

3. A property of the window object that lets you access 
the different URLs that the window has loaded over 
time. 

4. The global object that’s created every time the visitor opens a 
new window in her browser. 

5. Use this JavaScript timer method when you want to set a 
period of time to wait until telling a function to run. 

8. What some folks call a function that does one thing and does 
it well: a_function. 
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jquerycross solution 


jQ,uerycross Solution 
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custom functions 


Monster Mashup yl is a hit! 



Your hard work made Monster X 

Mashup a hot app for the kids! You solved 
some problems and added a popular feature in 
record time! I talked the boss into bumping up your 
contract check for all that great work._ _ 


I just spun up a Piggy 
Bat Witch, who*s going 
to be a character in a 
story Tm writing. 
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your jquery toolbox 



Your jftuery Toolbox 

You’ve got Chapter 7 under your 
belt and now you’ve added the 
window object, timed functions, and 
custom functions to your toolbox. 


YlV 

丁 W、s V 


’“。:5 么一 f 

: U 一厂二 一 

.“如 C . 1 W a 
Jfo6VA S * 


Timed -fu^dtiohs 

Methods available -Pov i\\t Vmdoy/ 
object 

setTimeou-t v/aits a set period Jc tir^c 
behove a -fuirv^-tioirv *to VU 妁 . 

sc*bl^*tcv*val vuirvs a fwr^tioh vcpca*tcdly> 
W\{\\ d dev-ta'm ar^ouirv 七 of h^C \Y\ bc*tv/CCirv. 

^Icavl^tcv-val v/i\>cs c\t^y\ Ac stKcdulc of 

vcpc3*tcd -fu^dtioirv ddlls. 


optimized dusiom -fuhdiiohS 

lAjHtihg you^r owh ^uhdtiohs allows you io ^ally 

s*tairt ^akihg ihtc\radt.vc web pages -that people will 
wahi -to use. 

But you dah also get danried away, ahd i 仏—。七以 
to look at how best h> dombihe ahd oyh^ y Q ^ 

+uhdtiohs so youVe whtih3 l« s dode that is easier 
i^3ih*tclih dhd debu^. 


l mds 
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8 jQnery and 


Please pass the data 


^ A dash of Ajax, a 
drop of jQuery, and seven 
cups of heavy cream. Are you 
sure you wrote down that 
一 recipe right, darling? 


Using jQuery to do some cool CSS and DOM tricks is fun, 

but soon you’ll need to read information (or data) from a server and display it. You 
may even have to update small pieces of the page with the information from the server, 
without having to reload the page. Enter Ajax. Combined with jQuery and JavaScript, it 
can do just that. In this chapter, we’ll learn how jQuery deals with making Ajax calls to 
the server and what it can do with the information returned. 
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aloha real-time data! 


Priwg the Pit to Pytc race iwto this cewtury 


From: Webville MegaCorps Marketing 

Subject: 42nd Annual Bit to Byte Race results page 

Hey Web Design Team, 

As you're all aware, every year we sponsor Webville's Annual Bit to Byte : by ^i^erace 

results oaae But our page is way behind the times, as we only update it after all the results are . 
People want instant g^Fication，and with Twitter and Facebook, folks attending the race are beating 

with a sweet payoff. If you can update our Webville Results page by 
next weeMo provide real-time results ， you，ll get to hang out m the VIP section at the end the 
(Oh, and did we mention the race is in Maui this year?) 

Here's what we need: 

1) The page should provide the option to show either male or female runners, or all participants at once 

2) it should provide automatic updates as runners cross the finish line. 

3 ) people shouldn't have to refresh the page as the results update. 

4) Lastly we want to indicate on the page when it was last updated and the frequency of the updates ， 
and to enable people the ability to start and stop the updates if they want. 

It doesn't look super different from last year's page, so that would be a good place to start. This is a 
great event, so we can’t wait to see what you come up with! 


Dionah C. Housney 
Head of Marketing 
Webville MegaCorp 


Dude, Maui! If II be sweet if 
we get to go to the VIP party! 


cV) 




O 










This year’s race is in Maui, 
so book your place early! 
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jquery & ajax 


Looking at last year's page 


Let’s have a look at last year’s page to see how it was set up and 
what it looked like, so we can understand better what is being asked 
by the marketing department. 


TV^csc -tabs a\rc 
by a 

pluj—m (haM 

d set *fo\r move oy\ 

*tV»s …). 


TV^IS is i\\t v-csul*t 



Configuring a plug-in 

Plug-ins are extensions to the base jQuery library that improve 
functionality, or make specific functions or tasks easier. In the 
example above, in combination with our CSS, the idTabs 
plug-in converts our ul element into clickable tabs and tells 
the a links in our lis which div elements to show when 
they are clicked. This particular plug-in gives us a very 
easy-to-use navigation structure for our page, so we can keep 
different types of information visually separate but still use 
the same display area. 


你 lax 


Don’t worry too much 
about the plug-in. 


Plug-ins provide 
additional functionality to 
the default j Query library. We’ll look more 
at these in Chapter 10, but for now let’s 
see what this one can do to speed up our 
project for us". 
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ready bake download 



k 鄉 9 Baw 

■r 

DpwHtpap 


Before we go on, let’s look at last year’s files to see how they set things up. 
The code should be in the lastjear.zip file (along with all the other files you 
can download for this chapter from http://thinkjquery.com/chapter08). Here’s 
a partial look at the three main files we’ll need: my_style.css, index.html ， and 
my—scrip tsjs. 


body { 

background-color : #000; 
color : white; 

} CSS dommCir\*t 

/ 

/* Style for tabs */ 

(> — 

細 a in { rirom hcv-c, -fchc 

color : # 111 ; ^cs-t of -the CSS is 

width : 500px; Atd\taitd buildi^a 

oh ihc page. 

margin : 8px auto; 1 ^ 

} 

細 ain > li, 細 ain > ul > li 
{ list-style : none; float : left; } 

細 ain ul a { 

display : block; 

padding : 6px lOpx; 

text-decoration : none!important; 

margin : lpx lpx lpx 0; 

color : #FFF; 

background : #444; 




細 ain ul a : hover { 
color : #FFF; 
background : #111 ; 

} 

細 ain ul a.selected { 
margin-bottom : 0; 
color : # 0 0 0; 
background : snow; 
border-bottom:lpx solid snow; 
cursor : default; 

} 

細 ain div { 

padding : 1Opx lOpx 8px lOpx; 
*padding-top : 3px; 

*margin-top : -15px; 
clear : left; 
background : snow; 
height : 300px ; 


細 ain div a { 

color:#000; font-weight : bold; 



my—style.css 
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Cv-ca*tc 1’mks 
>w>H be 
tonvev-ted m*to tabs 
by *tV^ pluj - 

The div 

clcrinChis -to 

hold -the 

^Oh-tcht 


<div id= M main M > 

<ul class="idTabs"> 

<li><a href= M #about">About the Race</a></li> 

<li><a href= M #finishers">A11 Finishers</a></li> 

</ul> 

<div id= M about"> 

<h4>About the race</h4>This race Bit to Byte Campaign! 
</div> 

<div id= M finishers"> 

<h4>All Finishers</h4> 

<ul id="finishers_all M > 

<li>Name : Bob Hope. Time : 25 : 30</li> 

<li>Name : John Smith. Time : 25:31</li> 
<li>Name : Jane Smith. Time : 25 : 44</li> 


portion of last years rwrmers ， 
hooded ihc fay. TW»s 
must V^ave been a pa'm b> update. 



</ul> 
</div> 


Indude 七 he JavaSdv-ip-t -Piles, 
as pev- usual- Wc use *thc same 
method -Pov- ihdludm^ pluj—'ms. 


<script src= n scripts/j query-1.6.2.min.j s"></script> 
<script src= M scripts/my_scripts . j s ''></ script> 

<script src="scripts/j query.idTabs.min.js"></script> 



index.html 


$(document).ready(function() 
getTime () ; ^__- 


function getTime(){ 
var a_p = ’，’， ； 
var d = new Date (); 
var curr hour = 



^ ) t ，- r*. r 

Call ouv* ~sW ^ 

/\ new ms-tan^c o-f *tV»c JavaS^v-ift Pa*tc object 

一 Mctiiods o*f p 3 "tc object 


d.getHours(); 


h JavaSdvipt tcv-^av-y opeva-tov 

(move OY\ 七 his m a bit) 

a_p = "PM"; 

12 : curr—hour = curr—hour, 
curr hour - 12 : curr hour 


(curr—hour < 12) ? a_p = "AM" 

(curr—hour == 0) ? curr—hour 二 

(curr—hour >12) ? curr—hour 二 

var curr_min = d.getMinutes().toString(); 
var curr_sec = d.getSeconds().toString(); 
if (curr_min.length == 1) { curr_min = "0" + curr_min; 

if (curr_sec.length == 1) { curr_sec = "0 1 + curr_sec; 

$ ( 1 #updatedTime ' ) . html (curr hour + " : " + curr min + ，’： 


curr hour; 






curr sec 


my—scripts.js 

"+ a p ); 


})； 
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buh-bye hardcoded results 


fretting dynamic 


The marketing team wants the page to update in almost real time, so 
those hardcoded results in the HTML file have to go. And they only 
used JavaScript to update the time on the page! This is the perfect 
opportunity to take your jQuery to the next level. Welcome to the 
next generation of web apps, where j Query, JavaScript, and a little 
bit of Ajax and XML can make your applications feel like dynamic 
(basically, the opposite of static), responsive desktop apps. 

Ajax, which stands for “Asynchronous JavaScript and XML,” is a 
way of passing data in a structured format between a web server and 
a browser, without interfering with the website visitor. With Ajax, 
your pages and applications only ask the server for what they really 
need — just the parts of a page that need to change, and just the 
data for those parts that the server has to provide. That means less 
traffic, smaller updates, and less time sitting around waiting for page 
refreshes. 

And best of all, an Ajax page is built using standard Internet 
technologies, things you have already seen in this book, or already 
know how to use, like: 



• HTML 

• CSS 



JavaScript 
The DOM 



To use Ajax, we’ll look at a data format that’s been around for a while 
(XML) and jQjLiery’s method of handling Ajax requests, a j ax. 
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OLP web, meet the NEW web 


Despite knowing some jQuery now, dealing with data threatens to drag us back 
into the days of the old web, where we had to refresh the whole page, or link 
to a completely separate page, in order to get some or all of the data to update. 
And then we’d be back to websites that seem sluggish, as the whole page has to 
be requested from the server each time. What’s the point of learning a bunch 
of cool j Query if handling data is just going to slow us down again? 

Enter Ajax 

Ajax allows you to exchange data with a server in a dynamic way. Using Ajax 
and some DOM maipulation, you can load or reload only a portion of the page 
with j Query and JavaScript. 






Page already loaded 
iw the browser 



CD 



j^uev-y o\r Javoi£^v-ip-t 
v-c^civcs the \rcsult, pavses 

七 updates ohly a 

po\rtioh o-f the 




JavaScript code 


Egspowse received 
tow server 


C9 


Update a portiow 
of the page 
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it’s all about the data 


Understanding Ajax 

As we mentioned earlier, Ajax is a way of passing data in a structured format 
between a web server and a browser, without interfering with the website visitor. 
But, really, it isn’t one thing — it is a combination of different technologies used 
to build exciting, interactive web applications. The JavaScript portion allows it to 
interact with the DOM structure of your page. Asynchronous means it can happen 
in the background, without interfering with your page or a user interacting with 
your page. And the X is all about the data. 


What is Ajax? 


Asynchronous 


JavaScript makes a request to the server, but 
you can still interact with the page by typing in 
web forms, and even click buttons — all while the 
web server is still working in the background. 
Then, when the server’s done, your code can 
update just the part of the page that’s changed. 
But you’re never waiting around. That’s the 
power of asynchronous requests! 


JavaScript 



JavaScript, as you already know well 
by now, is a scripting language used in 
web content development, primarily to 
create functions that can be embedded 
in or included from HTML documents and 
interact with the DOM. 


XML 

XML, or extensible Markup Language, 
is a specification for storing information. 
It is also a specification for describing 
the structure of that information. And 
while XML is a markup language (just 
like HTML), XML has no tags of its own. 
It allows the person writing the XML to 
create whatever tags he needs. 



But can’t we just use 
HTML? Why do we need 
another markup language? 


Yes, you could use HTML. 
But for the transfer of 
information, XML offers 
some unique benefits over 
its sister language, HTML. 
Let’s have a look to see 
what those benefits are. 
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The X factor 

XML is an acronym for extensible Markup Language. It offers a widely adopted, 
standard way of representing text and data in a format that can be processed without 
much human interaction. Information formatted in XML can be exchanged across 
platforms, applications, and even across both programming and written languages. It 
can also be used with a wide range of development tools and utilities. XML is easy to 
create and edit; all you need is a simple text editor, and the XML declaration at the 
top of the file. The rest is up to you! 


XML doesn't PO anything 

It may sound a little strange, but XML doesn’t really do much itself. XML structures 
and stores information for transportation. In fact, XML is really a metalanguage 
for describing markup languages. In other words, XML provides a facility to define 
tags and the structural relationships between them. It is important to understand 
that XML is not a replacement for HTML. XML is a complement to HTML. In many 
web applications, XML is used to format data for transport, while HTML is used to 
format and display the data. Let’s take a closer look at an XML file that contains data 
about some books. 


><ML declaration. TVis 
should always be ’mduded. 1 七 

dc-Pmcs ><ML version o\ 


C^ildv-c^ <^f "b^c 

voo 七 Y\odc. (opey\’nr^ 
dy\d dlosmj -tajs). 

|h tWis tasc, v/c av-c 

dcsfi.\ribnr\^ books. 


1.0" encoding= M utf-8 M ?> 

The \root o\r 


XML is used to format 

ctata lor transportation, 

wkile HTML is used to 

format anJ display data. 



0i\\tr -tajs used 
*to V^old 


<?xml version: 

<books>^ - 

<book> 

<title>The Hitchhikers Guide to the Galaxy</title> 
<author>Douglas Adams</author> 

<year>1980</year> 

</book> 

<book> 

<title>The Color of Magic</title> 

<author>Terry Pratchett</author> 

<year>1983</year> 

</book> 
book> 

<title>Mort</title> 

<author>Terry Pratchett</author> 

<year>1987</year> 

</book> 

<book> 

<title>And Another thing...</title> 

<author>Eoin Coifer</author> 

<year>2009</year> 

</book> 

</books> ^~ 





Close i\\t rooi or taj. 



books.xml 
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no dumb questions 



Dumb Quest! 


9ns 


So the big deal about XML is that 
you can create your own tags? 

Exactly! It's pretty convenient to be 
able to define elements and structure that’s 
suited to your business. Even better, XML is 
a standard, so tons of people know how to 
work with it. That means your vocabulary is 
usable by lots of programmers, in client-side 
and server-side programs. 

Wouldn’t it be easier to just make 
up our own data format? 

It might seem that way at first, but 
proprietary data formats—ones that you 
make up for your own use—can really cause 
a lot of problems. If you don’t document 
them, people may forget how they work. 

And if anything changes, you need to make 
sure everything is up-to-date: the client, the 
server, the database, the documentation... 
that can be a real headache. 

So are people really using XML as 
much as you make it seem? 


A- 

Given its flexibility for creating whatever 
data structures you need, XML is used as 
a basis for many different types of markup 
languages around the Web. There are more 
than 150 different types of languages that use 
XML, ranging from RSS (RDF Site Summary 
aka Real Simple Syndication) for news or 
audio/video feeds; to KML (Keyhole Markup 
Language) for geographical information used 
in Google Earth; to OOXML (Office Open 
XML), a standard submitted by Microsoft 
for word processing files; spreadsheets, 
presentations etc.; to SVG (scalable vector 
graphics), which describes two-dimensional 
images; to SOAP (Simple Object Access 
Protocol), which defines methods of 
exchanging information over Web Services. 
Wow, that really is a lot of uses for XML! 

OK, I get why we should use XML, but 
doesn’t it become a "proprietary data format” 
when we start declaring element names? 

No, not at all. That’s the beauty of XML: 
it’s flexible. The server and the client need to 
be looking for the same element names, but 
you can often work that out at runtime. 

But aren’t all web pages 
asynchronous, like when a browser loads an 
image while I’m already viewing the page? 


Browsers are asynchronous, but the 
standard web page isn’t. Usually, when 
a web page needs information from a 
server-side program, everything comes to 
a complete stop until the server responds... 
unless the page makes an asynchronous 
request. And that is what Ajax is all about. 

How do I know when to use Ajax and 
asynchronous requests, and when not to? 

Think of it like this: if you want 
something to go on while your user’s still 
working, you likely want an asynchronous 
request. But if your user needs information 
or a response from your app before 
continuing, then you want to make her wait. 
That usually means a synchronous request. 

Shouldn’t I use XHTML to interact 
with XML? 

Funny story: XHTML is XML. At its 
core, XHTML is not as similar to HTML as 
people think. XHTML is a stricter language 
when it comes to parsing, and originates 
from the same family as XML. But that 
doesn’t mean it can parse it or interact with 
it any better than HTML can. This book’s 
markup is actually using HTML5, which will 
encompass XHTML5 whenever the standard 
specifications get released. 



Tm game to get going with Ajax, but 
we need to get our structure set up for 
that first, dotVt we? It*s been that way 
every time before... 


You’re right. 

Let’s get that out of the way, so 
we can get on to adding some 
Ajax to our page … 
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HTML Code Magnets 

Rearrange the magnets to complete to code to create two new tabs that can display 
different pieces of information: one for male finishers (with the ID of male) and one for 
female finishers (with the ID of female). You can remove the About tab, but keep the 
All Finishers tab. In each section, put an empty ul element that will contain your runners. 
Also, remove all the existing content from the f inishers_all ul element. 


<body> 

<header> 

<h2>_</h2> 

</header> 

<div id= M main M > 


1 

index.html 


<ul class= M idTabs M > 
<li><a href= M 


M >Male Finishers</a></li> 


<li><a href= M #female M >_</a></li> 

<li><a href= M #all M >All Finishers</a></li> 


</ul> 


<div id= M male M > 


<h4>Male Finishers</h4> 

<ul id= M _ M x/ul> 

</div> 


<div _> 

<h4>Female Finishers</h4> 

<ul id= n finishers—f n ></ul> 

</div> 


<div 


> 


<h4>All Finishers</h4> 

<ul id=_></ul> 

</div> 

</div> 


<footer> 


<h4>Congratulations to all our finishers!</h4> 

<br>Last Updated : <div id=_></div> 

</footer> 

〈script src= M scripts/jquery-1.6.2.min.js M x/script> 

〈script src=_></script> 

<script src= M scripts/jquery.idTabs.min.j s M ></script> 

</body> 


scripts/my—scripts.j s n 


#male 


finishers all 


2011 Race Finishers! 



finishers m 


id= M female" 


id= M all 
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HTML code magnets solution 



HTML Code Magnets Solution 

Now you should have two new tabs, one each for male and female runners. 


<body> 

〈 header 〉 _ 

<h2> 2011 Race Finishers! </h2> 

</header> 

<div id= M main M > 


1 

index.html 


<ul class= M idTabs M > 

<li><a href= M #male [_ n >Male Finishers</a></li> 
<li><a href= M #female">_ Female Finishers [_</a></li> 
<li><a href= M #all M >All Finishers</a></li> 

</ul> 

<div id= M male M > 

<h4>Male Finishers</h4> 

<ul id= M J finishers m~~ I "></ul> 

</div>_ 

<h4>Female Finishers</h4> OuV o-P -(■misiiC'rs 

<ul id= M finishers_f"></ul> 

</div> 

<div id="all n ( > 

<h4>All Finishers</h4> 

<ul id=_ ” finishers_all” _></ul> 

</div> 

</div> 

<footer> 



<h4>Congratulations to all our finishers!</h4> 
<br>Last Updated : <div id=_| "updatedTime" |_></div> 
</footer> 

〈script src= M scripts/jquery-1.6.2.min 
〈script src=_ ” scr ipts/my—scripts.js n 

<script src= M scripts/jquery.idTabs.min.j s"></script> 
</body> 


j s"></script> 
></script> 


\uWdt a 

plu^—m *to build 
ouv 'tdbs. 
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Tesr DriVq 


Update your index.html file with the code you completed in the magnets exercise 
and open it up in your favorite browser. 



、 . 

I 


Nice work! 

The page is starting to take shape. Now let’s 
look at how we can go about getting data from 
the server so we can populate each of those 
tabs with some real race information. 
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time to GET serious 


frETtiwg data with the ajax method 

You want data? jQuery and Ajax are primed to provide it for you. The jQuery Ajax 
method returns an object (you remember those from Chapter 6, right?) with data 
about the particular action you are trying to perform. The a j ax method can accept 
many different parameters, and can POST data to or GET data from a server. 

$ . a j ax ， { 

url: ” my—page. 

The MRL o\ y/hat you - 〆 success : function (data) { m "m a 

wa^*t *to 6 \BT via Ajax 

})； 

For a complete list of all the parameters available on this method, visit 
the j Query docs site at http:/ / api.jquery, com /jQuery, ajax/. There are also a 
series of j Query convenience methods for dealing with Ajax calls. We’ll 
get to those a bit later, we promise. 







The daia -Pv-o» 

the Aja 乂 dall 


For now, just update your my—scripts.js file with this code, only 
including the new code in bold below. 
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jquery & ajax 



Tesr Drii/q 


Update your my_scripts.js file with the code from the previous page. Then, download the sample 
XML file for this chapter from http://thinkjquery.com/chapterO8/step2/finishers.xml, and save it 
in the same directory as your index.html file. When you’ve done this, open index.html in your 
browser, and open up the “Network” tab (in the developer tools in Google Chrome), or the 
“Net” tab (in Firebug for Firefox). Your XML file should be listed there, along with the other 
files from your page. 



Good point. 



Now that we know we can load the XML file into the browser, we need to pick out 
the necessary text and display it on screen. We’ll need a way to find each runner in 
order to add him or her to the correct list on the page. And yes, it’s good practice 
to put the a j ax calls into functions, so you can call them whenever you need them. 


Ajax calls are subject to the same-origin policy! 

The same-origin policy is a security concept for JavaScript and other client-side 
scripting languages. It allows scripts running on the page to access resources, like 
element properties and methods, that originate from the same server. It prevents 
scripts from accessing elements on pages that did not come from the same server. 
Due to legacy compatibility, JavaScript includes are not subject to these checks, but the XML file 
in the example is. That means the XML file must be on the same server as the page loading it. 
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looping with find and each methods 


Parsing XML data 

We need a method to pick out each runner from our XML file and be able to display it on the 
screen. Luckily, j Query supplies us with the find method, whose job it is to seek out elements 
that match whatever criteria we give it. find allows us to search through the descendants 
of elements in a structured, hierarchical set of information, like the DOM tree or an XML 
document, and construct a new array with the matching elements. The find and children 
methods are similar (we looked at the children method back in Chapter 4, when we were 
building the menu for the Webville Eatery), except that the latter only travels a single level 
down the DOM tree. And we might need to go further... 



TWis be selector 


This C^y\ be othc\r j<$ucv*y 
method, like events, text 

rwahipula-to\rs, o\r style mdhipula-to^ 



t 

乂 TKis tar\ be air>y sclcd*fcov-> or a 
youf ov dollcdtior> o( j<$ucvy 


TWis y/'ill -f'md all ul elements i\\ai 
are toy\*ta*mcdi m l'» clcw'c^'ts ar\d sc*t 
badkyou^d dolov- *to blue. 


By comLining[ tke linct metkoct 
witk tke eack metkoct, we can 
searck lor a group ol elements 
and interact witk eack one 
individually，using a loop. 





Can you think of which pieces of our XML document 
we would need to interact with in order to display 
the individual runners on the screen? 
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jquery & ajax 



jQueiy Cocte Magnets 

Rearrange the code magnets to create a function called getXMLRacers that will call the aj ax 
method and load the finishers.xmlfWe. Once the load is successful, empty all the lists that will hold 
the information, and then find each runner in the XML file and determine whether the runner is 
male or female. Append the runners to the appropriate list for their gender, and always add them 
to the f inishers_all list. Then, call the getTime function to update the time on the page. 


function 


$.aj ax ({ 
url : 



getXMLRacers(){ 


cache : false, 
dataType : "xml ", 




function(xml){ 


$ ( 


(’ #finishers f ') 


)•empty() 


I (info) j 



('#finishers all') .empty(); 


finishers m' 


$(xml).find 


(function() 


var info = '<li>Name : ' + $ (this) .find 

find("lname").text() + '. Time : ' + 


(this) 


.text () + ’ </1i>'; 


if( $(this) .find("gender") .text () 
$('#finishers m*) .append_ 


， m n ) { 


("runner").each 


}else if ( $(this).find("gender").text() 
_•append(info); 


f" ) { 


}else{ 


$ ( ' #finishers f') 


.append(info); 


})； 



})； 




( M fname M ).text() 


(this).find("time") 



my—scripts.js 
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jquery code magnets solution 



jQueiy Code Magnets Solution 


Using find and each, you can loop through the finishers.xml file, check the gender, and add each 
runner to the appropriate tab in your web app. 


function 



cache : false, 
dataType : "xml ", 


II ul 


success : I function(xml) { 

$ ( I ’ # f inishers_m' I ) • empty (); 


('#finishers f ') 





它州 \> 七 7 all 

so 

yt undated data- 


('#finishers all').empty() 
(xml).find 


Loop *tV)V"OU^ 

><ML ^»lc 


cadii r\AV\Y\tY elemerrt ’m 


runner").each 


var info = * <li>Name : * 

find("lname") .text () + 1 . Time : ' — 


+ $ (this) .find 

( M fname M ).text() 

J $(this). find ("time") 

r . text () + 


V f 


$(this). 


if( $(this) .find("gender") .text () 
$('#finishers m’）.append 


(info) 


}else if ( $(this) .find("gender") .text () 

.append(info); 




Che 匕 k "the gchdcv- of 

eadh v-uhhcv, so you 

add it io the 

list. 


}else{ 


$(▼#finishers all') 


.append(info) 



Also, add tat\s b> 

七一 all list 


}); 


Call the gctTimc -fuh^-tioh -to 

update the page with the \asi 

七一十 ^iXMLRa^s Wtio, 

was 匕 ailed. 


Ih 十 example, the lihC stavtmj wi-th u vav m-Po - ... w 

T ^ the page, so wc had h> \ci \i ^ oy.io 

the hext Imc. You woh i heed to do that ih you^ Code 



my—scripts.js 
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jquery & ajax 


— Tsst DriVq - 

Update your my—scriptsjs file with the getXMLRacers function. Also, replace the 
call to the getTime function (in the document. ready section) with a call to the 
getXMLRacers function instead. The getTime function is now called inside this new 
function. Make sure you run all your code through your web server, so the URL should 
say http ://, not file:/ /. Again, make sure your XML file is on the same server as your 
HTML file, or you will encounter those pesky same-origin permission issues. 



Luckily, in the previous chapter, we’ve already 
seen how to schedule events to happen regular! 
on a page. Let’s have a quick look at how to do 
that again, and what options we have this time. 
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all in good timing 


Scheduling events on a page 


In the last chapter, we saw that both JavaScript and j Query offer timer methods that 
call functions that run based on time passing. JavaScript’s window object has four timer 
methods for timed control: setTimeout, cl ear Timeout, setlnterval ， and 
clear Interval, j Query provides the delay method, but it focuses on effects and offers 
no option for scheduling or repeating actions. So, that one won’t help us here … 


JavaScript timer methods 


setTimeout 
~' 

Use me when 
you want to set 
a period of time to 
wait until telling a 
function to run. 


setTimeout(myFunction, 4000) 


TV^c W 
6dll 七 ^ 
twcout duva 七 ， Oh 

has passed- 


The 
delay fih 
^•Ilisc^ohds) 


setlnterval 




0 Q 



I tell a 
function to run 
repetitively with 
an interval of time 
between each 
repetition. 


setlnterval(repeatMe, 1000) 


The -Puh^tioh 
"to ircpcat 

5-Ptcv c 把 h 

is up. 



(m w'»IV»sc6ov^ds) 



Ifs obvious, isrVt it? We use setlnterval, 
just like last time. Right? 


Query's delay method 


dela 、 


^dd a pause 
betw^n effects 
that ar^ueued 
up in a chaiK^f 
effects. 


slideDown() . delay(5000) .slideUp() 


七 Wis Aam 

_ vb 、 — 於 

卜巧 as an 



I 灼七 his example, 七 he 
delay rwc^thod pu-ts 
d -rive—sedo^d pause 
between 七 he slideUp 
and slideDoym c-Pfcdts- 


Not so fast! 

We can’t always be so sure, setlnterval normally would 
work to schedule regular events on a page, but when dependent 
on outside resources (like our data file), it can cause problems. 



setlnterval will run even if the function 
calling isn’t finished yet. 


is 


Wofoli iff If you’re waiting on information from another server, or 

• waiting on user interaction, setlnterval could call your 
function again before you 3 re ready. Your functions may not always 
return in the order that you called them. 
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jquery & ajax 


Sclf-refcrewcmg fuwctiows 


A self-referencing function calls itself during its normal operations. Such functions can be particularly 


useful when you need to wait for the function’s currently running operation to complete before running 
it again. Combine this with a set Time out call, and you can schedule a function to run but only keep 
going if the previous call to the function was successful. Otherwise, it won’t reach the call to itself in the 
code, and hence it won’t be called again. 



en your pencil 


Create a function called startAJAXcalls that gets called when the page is loaded and 
which will call the getXMLRacers function every 10 seconds. Define a variable at the start 
of the script file, inside the $ (document) _ ready function, called FREQ and set it to the 
number of milliseconds we will need as a parameter for the frequency of our repeated calls 
to the getXMLRacers function. Use setTimeout to call the startAJAXcalls function to 
make it self-referencing, after the getXMLRacers function is complete. You’ll also need to 
call the startAJAXcalls function directly in your code to start the timer. 


$(document) .ready(function () { 


function startAJAXcalls(){ 


getXMLRacers(); 


function getXMLRacers(){ 

$•aj ax ({ 

url : "finishers.xml 



my—scripts.js 
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sharpen solution 


i^^irpen your pencil 


This solution uses setTimout inside the startAJAXcalls function to 
call the getXMLRacers function to get our XML, plus a call to itself. This 
self-call will ensure that the next call will only happen when the last one has 
completed. This will guarantee that there is not a buildup of requests to the 
server if the network is slow, or if a response from the server does not come 
back before the next call is scheduled to be made. 


Sc*t ou\r vavisblc 

{p IOOOO, s ： \y\U 

sctTiw'Cou't 

i"ts dmctcv* 

\y\ milliscdo\r\ds. 


Sih 以 we wait Uh-til the 
t ， a\\ -to ouir -fuh^tioh 
IS ■finished ； wc use the 

s ^Tin\cowi *fuh 匕 "tioh. 


Call *t^c - 夕 ge tXMLRacers(); 


$(document).ready(function(){ 

.皇碰 . 

function startAJAXcalls(){ 

.?C.tTimCPui;( .^uhd-jbiohO • 

..... LRadcrsO ； 

..... 





心 • 咖仫州如 sure 

{ytrt »S the 

» s loaded. 


Pass ouv vaHdble ih 

as a pavametev*. 

Call ouv 


dveated m 

ovdev *to stav 七•，七 . 


function getXMLRacers(){ 

$.aj ax ({ 

url : "finishers.xml 
cache : false. 




Call o 价 

^t><MLRadc\rs 

v-cfca-tcdly 

\Y\S\dt *tV)C SC*tT'imCOlA*t. 

Call owr -fuh^tioh agaih 

io V-Uh ih lo seconds. 


my— scripts.js 


there ^ are no o 

Dumb Qjaesti9ns 


Everything I’ve read about Ajax says I need to use the 
XMLHttpRequest object; is that right? 

Yes, but not with jQuery. As a web programmer, you don’t need 
to use that object. jQuery does it for you when you use the ajax 
method. Also, since Ajax calls can differ per browser, jQuery figures 
out the best way to do an Ajax request for each of your site visitors. 


What happens if the server returns an error or doesn’t 
respond? Will it sit and wait forever? 

No, the request won’t wait forever. You can set a timeout as one 
of your parameters in your ajax call. Also, just like the success 
event parameter, which can run a function, there are others to handle 
error, complete, and many more. These events can be set as 
local events, when the a j ax method is called, or as global events to 
trigger any handlers that may be listening for them. 
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jquery & ajax 


— Tsst DriVq - 

Update your my—scripts js file with the new code you just created. Also, don’t forget to add a call to the 
new function just after your call to the getXMLRacers function at the bottom of your script. Then, 
view the page in your browser, and use the “Network” feature of Google Chrome or the “Net” feature 
of Firefox’s Firebug to see the file get loaded every 10 seconds. Once you see this happening, update 
your XML file, using your favorite text editor, with the entry listed below and see your new runner 
appear on your page... (Don’t forget to save the XML file after you’ve updated it!) 



Add this v-uhhcv- io 
youv XML -file ahd 
save it Waic\\ him gel 
loaded oh-fco youv- 
3uiorm3-ii^slly. 


<runner> 

<fname>Justin</fname> 
<lname>Jones</lname> 
<gender>m</gender 〉 
<time>29 : 14</time> 

</runner> 
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who doesn’t want more? 


ftettmg more from your server 

As we’ve seen so far, HTML is great for displaying information on a page and XML is 
great for formatting data for transportation to a page, but what if you need your page to 
actually do something, like tell the time or get data from a database? Sure, we could 
probably do some more fun things with j Query and JavaScript, but why not use 
something designed for the job? 


Server-side languages to the rescue! 


There are several different types of server-side languages — like JSP, ASP, or Gold 
Fusion — but we’re only going to focus on one for our purposes: PHP. 

PHP (which stands for PHP: Hypertext Processor — yes, that’s an acronym within an 
acronym; don’t ask us why!) is a free, general-purpose, server-side scripting language 
used to produce dynamic web pages. Files that contain PHP code are run on the server, 
and produce HTML that is then provided to a browser to render. We’ll look at PHP in 
a little more detail in the next chapter, but for now we’ll see how it can help us with our 
“updated time” feature. 


I 






browser 


PHP is used 

to ctynaitiically 

produce HTML, 

wkick is tken 
displayed in tke 
trowser. 


•Php 



O 


Hold on! If you haven’t completed 
the Appendix ii instructions for 
installing PHP and MySQL, then the 
next page won’t work for you. You II 
need PHP working for this part. 

Do that before proceeding. 
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jquery & ajax 


What time is it? 


OK, we’ll confess, there is already a JavaScript function we could use to get the 
time. But it is a large, complicated function for doing something so simple. Luckily, 
PHP gives us a very easy way of getting the time, using the date function. Just 
like the functions you have created up to this point, it takes multiple parameters 
and returns a different version of the date, depending on what parameters you 
pass in. The main parameter determines how you want the date to be displayed. 
Let’s have a closer look: 


Call PttP date Utho^ 

w 

date (string $format 

PHP also uses dollav 

bu*t or\ly vav*i3blcs. 


msidc s^uav-c bv-a^kets, 
L By\d 3 ； is optional 



time() 



f int $timestamp = 

Pass *m a pav-a^ctev* -fov* ai , 

Wat i 如址 Yo"aA PH ? 7 ，h 

TW,s -,s a . 



For a complete listing of the parameters of the date function, visit 
http:/ /php.net/ manual/en /function. date .php. 


^ tBs! 


Create a new file in the same folder as your index.html file, and call it time.php. 
Add the following code to your new time .php file. 


"PV»C 七 clU 

PHP -bo 七 c 七 V\C 

o-f *to 

i\\t 


<?php 


TV dosmg PHP 



The PttP This -tells r ± ^ ^ j r i, , A 

rihe y/kvi PttP todt ^ ^ ihc 

\i ^eds -to parse is. w CyZuah y0[A ^ 


； iOh. 


date_default_timezone_set('America/Los Angeles') 
echo date( M F j, Y, g:i:s a M ); 


v ?> 




fit 桃 ， wi-th 




.loh. 


sample date -Po\rinr»a-t s-tv-mj* 

F — Full 七以七 rwohth 
j 一 p3y, y/ithou 七 leddim^ z^vos 
V - Fou\r-dig*rt ycair 

3 — ttoulr — IZ—houlr -foyrwa-t 
• - Minutes, y/iih leadmg iev-os 
s - Scdohds, y/i-tli ledd'm^ z^vos 

a — Lowcvdasc am oy pm 


1 

time.php 
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test drive 


略 D 讀 


After you save your time.php file, bring it up in your browser to make sure the date is in 
the correct format. PHP code must run through your web server, so the URL should 
say http ://, not file:/ /. Also, make sure the URL is pointing to the server where you are 
developing your code. 


口 


(_) thinkjquery.com/chapterOi \ ■；>' 


C O thinkjquery.co m/chapterO8/step5/time.php ☆ 


July 13 a 201I 3 3^1:15pn 



ouv little of PHp 

匕。十 we the W displayed 

all 七 vJavaSdHp 七 / 


I am SO ready to get rid of this pasty- 
white skin. PHP made the updated time bit 
a snap, but don’t we have a few requirements 
we still haven’t gotten to? 


Yeah, we’re not getting on that plane quite yet. Let’s see what’s left to do: 

o We want to indicate on the page how recently the page was updated 

❺ We want to indicate the frequency of the updates. 

❺ We want to give people the ability to stop and start the 
updates, should they so choose. 


Let’s have a go at the first and second items on the list. We’ll tackle them 
together since they are related. 
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jquery & ajax 


i^harpen your pencil 


Add a <span> tag, with the ID of freq, in the footer of your index.html 
page. This will be used to indicate the result of a new function called 
showFrequency, which should display how often the page is updated. Also, 
create another function, called getTimeAj ax, which will load the time.php file 
using the load method — a jQuery convenience method for Ajax. This method 
will take a URL as a parameter and write the result automatically into the div 
with the ID of updatedTime. Last, replace the call to the getTime function in 
getXMLRacers with this new getTimeAj ax function. 
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sharpen solution 

^^irpen your pencil 


Now you’ll have added a <span> tag with the ID of freq in the footer of 
your index.html page to display how often the page is updated. You’ve also 
created a new getTimeAj ax function, which loads the time.php file using 
the load Ajax convenience method, which will then write the result into the 
updatedTime div. You’ve also updated the getXMLRacers function to use 
the new getTimeAj ax function instead of the JavaScript getTime function. 



<footer> 

<h4>Congratulations to all our finishers!</h4> 

Add the 七铋 


<br><br> 


display -the 


Last Updated : <div id= M updatedTime M x/div> 

</footer> 

〈script src= M scripts/jquery-1.6.2.min.j s"></script 〉 
<script sre^"scripts/my scripts.j s"></script> 




index.html 



function 

"Page refreshes every ’’ + FREQ/1000 + M second (s) •’’）； 


Crcaic -two hew -fuh^iohS, OhC 

节 the ay^d the 

o-their io get ih c ii^ c 
tk scirvcir via Ajax. 


Divide by 1,000 "to do^vc\rt 
rwillisc^ohds {jo se^o^ds. 


function 

$ ( ) . load ( “ 七 imc.ph〆’ 


Load 

Output result bo iVic street Ue w 
*rn -tKc elemerrt ^itdT\^ 




my—scripts.js 
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jquery & ajax 


TesT DriVq - 

Update your my—scripts js file with the new code you just created. Also, don’t forget 
to add the new span element to your index.html file, and replace the call to the 
get Time function with the getTimeAj ax function. 


Z011 Kjcc i inishcrs 

C O thinlgquery.com/chapter 08 /step 5 / 


2011 Race Finishers! 


Congratulations to all oar finishers! 

icfieUies trvciy 10 secutKJ(s). 

Last Updated 

July 11.2011. 1230:49 pm 


All Finisher% 


☆ 


AllFinisha^ 


Name: John Smith. Time: 25:31 
Name: Jacob Walker. Time: 25:54 
Nfimr - Mary Rrown Timr* 26-01 
Nainr' Jmny Pirrr^ Tinv 26-04 
Ndnie. Fidiik Jones. Tkue. 26.08 
Name: Bob Hope. Time: 26 J 8 
Name: Jane Smith. Time: 28:01 
Name: Ryan Rice. Time: 28^4 


o We want to indicote on the poge how recently the p ciye wus upJul^J：* 

❺ We want lu indicule Ihe frequency of the updates — 

❺ We want to give people the ability to stop and start the 
updates, should they so choose. 



But how are we going to stop 
a function that calls itself? 



That’s a tricky one. 

We’ll need to change the function to only 
run when certain conditions are met. 





What feature have we seen so far 
that checks if conditions are met? 
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another conditional check 


Turwiwg off scheduled events ow your page 


Back in Chapters 5 and 7, we created a “monster” function by using 
setTimeout to continuously call the functions that produced the 
lightning effects. This led to some unexpected consequences — the page 
lost focus and the visual effects piled on top of one another when someone 
returned to the app. 

However, since we already determined that we need to wait until 
the previous call to the function is finished, we can’t switch to using 
set Interval for these calls. 

We need to come up with a better solution. And what better solution 
than one we’ve already seen? We can’t use the window. onblur and 
window • on focus browser events, since we don’t want people to have 
to leave in order to stop the updating. But we have already seen, across 
several chapters, how to run code based on conditional logic, so let’s use that 
for our solution here as well. 






Can you think of which conditional logic structure we 
could use for this? (Hint: We’ve used it already to check 
the gender of the runners in the XML file.) 


What other stuff, besides XML, can 
Ajax load into the page? 

Using jQuery, you can load all sorts of 
information into the page. Like you’ve just 
seen, using the load method, you can load 
the results of a PHP file directly into your 
HTML element. Also, you can load other 
HTML files, JavaScript files, plain text, and 
JSON (JavaScript Object Notation) objects. 
We’ll look at JSON in the next chapter. 



What other convenience methods 
are there for Ajax in jQuery? 

jQuery has five convenience 
or shorthand methods for Ajax: get, 
get JSON, getScript, post, and 
load. The first four are called using the 
jQuery object. But load can be called from 
any element—which will be the destination of 
the returned data. 


When should I use the load 
method and when should I use ajax? 

The load method is designed 
for loading a particular piece of data 
into a specific place, like we do with our 
getTimeAj ax function. The a j ax 
method is much more complex and has 
many more purposes and parameters. It can 
be used to load other information or send 
data to the server for processing. Well see 
that more in the next chapter. 
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jquery & ajax 


i^harpen your pencil 


Create a global variable called repeat, with a default value of true. Create a function that will alter the 
repeat variable with the click of a new button, giving it the ID of btnStop. Set the HTML of the span 
element with the ID of freq to say "Updates paused.” Also, create a button called btnStart that will set 
the repeat global variable to true, as well as call both the startAJAXcalls and the setTimeout 
functions if the repeat variable is true. Add the new buttons to the footer area of the page. 


$(document) .ready(function () { 


var FREQ = 10000; 
function startAJAXcalls(){ 


setTimeout( function() { 

getXMLRacers(); 
startAJAXcalls(); 

}, 

FREQ 


$ ( "#btnStop M ) .click(function() { 


$ ( M #freq") .html( 

})； 


function () { 





<footer> 


my—scripts.js 


<h4>Congratulations to all our finishers!</h4> 


<br> 

<span id= n freq M ></span> <br><br> 
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sharpen solution 


i^^irpen your pencil 


When finished, you should have a variable called repeat that will control whether or not the 
function will call itself again to get the XML file for updating. The value of this variable should 
be controlled by the btnStop and btnStart buttons, which are added to the footer area 
of the page. These buttons also set the text of the f req span element to show different 
messages depending on whether or not the page is being updated. 


dcWt ^ f \ \oads 〜 

vav-'iaklc »s *brue. 


document) .ready(function () { 

. var. repeats. .*b ： u.ci ... 

var FREQ = 10000; 
function startAJAXcalls(){ 

i^(rcpca*t) { 

setTimeout( function() 
getXMLRacers(); 
startAJAXcalls(); 

}, 

FREQ 

) 



Set the vav-iablc io 
^ sc wheh the bthS-fcop 

but-toh is disked 

startA 鄭心 h 宁。士 — 

Add the hew but-tohs -fco the 
Weir of 卿 

<footer> 

<h4>Congratulations to all our finishers!</h4> 

<bu*t^on ! 七.《.咖扣 
<but*bon 〒 .: 味々；(听 

<br> 

<span id= n freq M ></span> <br><br> 


$ ( M #btnStop") .click(function() { 

$ ( M #freq M ) .html ( u Ufda*tcs paused-^ ) 

})； 

. /(' 恭 b*biS*tairt") ， di6k( function () { 
startAJAXcalls(); 

. .s.hpy/Hr.c^c^d.yQi 




index.html 


3、 


my—scripts.js 
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jquery & ajax 



Tesr DriVq 


Update your my_scripts.js file and your index.html file with the new code you just created. Then, load 
the page in your favorite browser to make sure it all still works. Try out the new buttons to make 
sure they stop the Ajax requests. You will be able to tell in the “Network” tab in Google Chrome, or 
the “Net” tab in Firebug for Firefox. 


^ 門 I 冋 —^ 

❹ 2011 Race Finishers 

分 C O thinlgquery.com/chapter 08 /end/ ☆ 八 


2011 Race Finishers! 



• Name: John Smith. Time: 2531 

• Name: Jacob Walker. Time: 25:54 

• Name: Mary Brown. Time: 26:01 

• Name: Jenny Pierce. Time: 26:04 

• Name: Frank Jones. Time: 26:08 

• Name: Bob Hope. Time: 26 J 8 

• Name: Jane Smith. Time: 28:04 

• Name: Ryan Rice. Time: 28:24 



Congratulations to all our finishers! 


It works! 


Now you’ve got a page that 
can be updated in real time (by 
updating the XML file), and 
you’ve enabled users to start or 
stop the updates. 


This is gonna be the 
best team outing EVER! 


Start Page Updates 


Stop Page Updates 
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your jquery/ajax toolbox 



Your jftuery/Ajax Toolbox 

You've got Chapter 8 under 
your belt and you’ve added 
a little PHP，some XML, and a 
bunch of Ajax to your toolbox. 


^o\t a 从洗 

MaW 洳 ^ W 

一 . 叶如⑽ 

- 

a\a%() sV^ov-ttu-ts 

Uere are U s^orUuts U aja% m 产？ a 11 

為 red WWt ? ara.eWs b Y 

de^fauli Ut ulWatelv dall^ aja% -etW* 


f 

f.ytOSON 

f.fost 
f .lodd 


X/WL , 

s tv-u^tuirc. I 

rt 》 

I 


prtp 

/\ scrvcr-sidc sdviiptm^ la^uay 
^a-t Ic-b you ma^ifula-tc >wcb 
do^*tc^*t oy \ *tV>c sewev 
be^ov-e a is dclWcvcd *to *b^< 
6lic^*t bv-oy/sev. 
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9 Handling JSON dqta 


+ Client，meet server^ 



As useful as reading data from an XML file was, that 
won’t always cut the mustard. A more efficient data interchange 
format (JavaScript Object Notation, aka JSON) will make it easier to get data 
from the server side. JSON is easier to generate and read than XML, too. Using 
jQuery, PHP, and SQL, you’ll learn how to create a database to store information 
so you can retrieve it later, using JSON, and display it on the screen using jQuery. 
A true web application superpower! 


this is a new chapter 



guess we should have checked with marketing... 


Wcbvillc MegaCorp's Marketing Pcpartmcwt 
doesn't know XML 


From: Webville MegaCorps Marketing 

Subject: Re: 42nd Annual Bit to Byte Race results page 

Hey Web Design Team, 

We really like the updates you’ve made to the website. 

We have a problem though: nobody in our office knows XML! So we don't know how to add new 
finishers to the race website. 

We've tried, but every time we get it wrong, it makes the website 

don't show, or fields disappear from the page even though they re in the XML file. It s very odd. 

What we 5 d really like is some way to just type into a few boxes and click a button to add a finisher. 
Can you make this happen? 

And if we make a mistake, can you make it so we don't break the whole site? 

I know it’s only three days until we all fly out to Hawaii, but we'd really like this working before we go. 

Do you think you can make it in time? 

Dionah C. Housney 
Head of Marketing 
Webville MegaCorp 


ID. 




The countdown has begun- 
3 days to ^o! 
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XML errors break the page 

When there are errors in the XML, the logic that we wrote to read and parse that XML 
fails. These errors mainly happen when there are issues with the tags, like forgetting to 
close a tag or having the wrong case in the tag name. However, data in the tags can also 
cause XML some problems if it’s not encoded for use in XML properly. 


找 2011 Race Finishers 



Start Page Update— 


Page refreshes ever; 

Last Updated 

My 30,2011:3:21: 


◦ thinkjquery.com/chapterO 




CO thinkjquery.com/chapter09/xml_error/finishers.xml 


☆ 



This page contains the following errors: 

error on line 8 at column 11: Opening and ending tag mismatch: runner line 0 and Runner 

Below is a rendering of the page up to the first error. 


John Smith m 25:31 


\t 


)(ML -f>l< 

•m a web bv-oy/sev *tclls us 
*t^c cv\ro\rs av-c- 





It looks like XML won’t work for what we need. What other 
options do you know of for Marketing to add new runners? 




1 

2 

3 

4 

5 

6 

7 

8 
9 

10 

11 

12 

13 

14 

15 

16 

17 

18 

19 

20 
21 
22 

23 

24 

25 

26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 

53 

54 

55 

56 

57 


Headers Content Cookies Timing 

!< ?xml ve 「 5/.on="l .0" encodings"utf-8"?> 
<finisher l 


<runn 



</fname> 

v <t±^q：T 

</Runner> Vme> 
<runner> 

，/lname> 
nder> 
《Irsd time 〉 

<runner> 

<fname>Mary< 
<lname>Brown< 
<gender>f</gend 
<time>26:01 </tii 
</runner> 

<runner> 

<fname>Jenny</fname> 
<lname>Pierce</lname> 
<gender>f</gender> 
<time> 26:04</time> 
</runner> 

<runner> 

<fname>Frank</fname> 

<lname>Jones</lname> 

<gender>m</gender> 

<time>26:08</time> 

</runner> 

<runner> 

<fname>Bob</fname> 
<lname>±i£. 




ier> 

^■fi rstname> 
^lname>Siniit 

</runn 、 : ender>f< 
<runnery 

< fname >^Sh^<7fna 
<lname>Rice</lnami 
<^nd.^r>ro</gender > 


I/Vv-Ohj 

"tag. 


ie> 



</f ： 


nho-thc^ 
wiih a <\ruhhc^> 


Gsc issue 
佺 3 
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forms to the rescue 


Collect data from a web page 


Odds are, you’ve already thought of using an HTML form. With a form, you can 
collect all sorts of data and send it to the server for processing. Forms have several 
different types of elements used to collect various types of data. We’ll look at forms 
in much more detail in Chapter 10, but for now, let’s just use two of the most basic 
form elements: a text box and a drop-down list. You may be a pro at forms already, 
but let’s just take a quick look so we know what we’re dealing with here. 


TV,e <_ ㈣ 七严 $ 

W*to e%〆 m 

^\row tWis element ^ 

<input 




The type tells the b\ro>wscv- liov/ 
•to veadt y/hch it 


dosi h 




type= n text" name= n txtEmail n / > 


TV^c <scic^ WU 

Wov/scv ^ d 伏 ^ 


<select 



name: 


f 

n truthiness"> 


The o-P "the 

elemch-t is SCh-t -to -the 
sevvem (o>r p^ro^cssihg. 


<option 

<option 

</select> 


value= fT 1 n >True</option> 
value="0">False</option> 



The value o-P -the losers optioh is 
sent to the scv-vcv-. 



TV^ oft— ^ lS ?' a 7 s 

i\,t list m a 

dvo? - d OYm l l 士 . 



It would probably be easiest 
for now to just create a new tab 
with the form on it, right? 


That should work and be easy to do, since 
we’ve already figured out how to add tabs. 

Then we can work on how we’re going to store/retrieve that 
data to display in the Finishers lists. 


328 Chapter 9 




handling json data 


keapy BaK^ 



HTHjt i CSS 


Update your index.html file with an additional tab to add new 
finishers via a form. Also update the entry in your my—style.css file 
to make the element with the ID of main wider. 


<ul class= M idTabs M > 

<li><a href= M #male M >Male Finishers</a></li> 

<li><a href= M #female">Female Finishers</a></li> 
<li><a href= M #all M >All Finishers</a></li> 

<liXa href= M #new M >Add New Finisher</aX/li> 

</ul> 

<div id= M male M > 

<h4>Male Finishers</h4><ul id= M finishers_m M x/ul> 

</div> 

<div id= M female M > 

<h4>Female Finishers</h4><ul id= M finishers f M x/ul> 
</div> 

<div id= M all M > 

<h4>All Finishers</h4> <ul id= M finishers all M ></ul> 
</div> 

<div id= M new M > 

<h4>Add New Finisher</h4> 

<form id= M addRunner M name= M addRunner 



#main { my_style.css 

background:#181818; 

color : #111; 

padding : 15px 20px; 

width : 600px; 

border : lpx solid #222; 

margin : 8px auto; 



Add tailed 

w Add Now PmisKcv-. w 




TKc tells -fov-m *to 

be scv>*t -fov pvodcss'm^. 


action= M service .php M method:’'POST n > 


First Name 

: <input 

type: 

= M text' 

'name: 

= M txtFirstName M id= M txtFirstName" /> <br> 

Last Name : 

〈input 

type:’ 

'text" 

name=' 

'txtLastName" id= M txtLastName" /> <br> 


Gender: <select id="ddlGender M name= M ddlGender"> 
<option value= M ">--Please Select--</option> 
<option value= M f M >Female</option> 

<option value= M m M >Male</option> 

</ selectXbr> 

Finish Time : 


The method 
dctcv-rnihcs 
daia 

will be scht -to 
the sevvev-. 


<input 

type: 

"text" name= M txtMinutes M 

id=" 

txtMinutes" 

size= M 10" 

maxlength= 

n 2 ▼▼ 

/>(Minutes) 

<input 

type: 

"text" name= M txtSeconds M 

id=" 

txtSeconds M 

size= M 10" 

maxlength= 

n 2 n 

/>(Seconds) 


</div> 


<brXbr> 

<button type= M submit" name= M btnSave" id="btnSave M >Add Runner</button> 
<input type= M hidden M name="action" value= M addRunner M id="action M > 
</form> 

A hidden HTML -field- Well 
use "this move m 9 little bit 



index.html 
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test drive 


^sr 


Open up index.html in your browser and select the Add New 
Finisher tab to see the new form and fields added to your page. 


回 


Q 2011 Race Finishers 

C O thinkjquery.com/chapter09/step5/ 


☆ 



I Start Page Updates I Stop Page Updates 


Page refreshes every 10 second(s). 


Last Updated 
My 31,2011, 10^)9:14 





Now that you’ve got a form in place to collect the data, how 
do you think we should go about storing and retrieving it? 
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handling json data 


What to do with the data 

Now we need to send the data collected by the form to the server and store it somehow. To do that, we’re 
going to use another language, PHP, to insert the data into a database. Don’t worry! We’ll get you up to 
speed on PHP and databases in a bit, but first let’s focus on how we get our form data to the server. 

There are two methods of sending the data to the server using HTTP: GET and POST The main 
difference between GET and POST is how the data is sent to the server. GET will append the form field 
names and values onto the end of the URL as key/value pairs. PHP can read this information out of an 
associative array called $_GET [ ], which is sent to the server when the form is submitted. The data is 
visible after the ? in the URL. 

POST sends the data — also in an associative array, but encoded differently — and is not visible to the end 
user in the URL. The $— POST [ ] associative array contains all the information from the form elements. 
This, like the $_GET [ ] array, is a series of key/value pairs of the form element names and values. 


HTTP GET method 


<form id= M my_form M method: 
<input type= M text M name: 
<input type= M text M name: 
</form> 


get" action^ 
'a M value= M 1 


'x. php M > 
/> 


'b M value= M 2 M /> 


Send the data to the server. 


x.php?a=l&b=2 


<?php 


echo $_GET[ M a M ] 
echo $ GET[ M b M ] 


// Writes out M 1 
// Writes out M 2 


?> 


HTTP POST method 

〈form id= M my_form M method= M post M action= M x.php M > 
〈input type= M text M name= M a M value= M 1 M / > 

<input type= M hidden" name= M c M value= M 3 M / > 

</form> 

Send the data to the server. 

1 

x. php 


<?php 


echo $_POST[ M a M ] 
echo $ POST[ M c M ] 


// Writes out M 1 
// Writes out M 3 



But if the form sends the 
information itself, why do we even 
need jQuery or anything else? 


goi% "to use POST 

*fo\r this dhaptev-. 


Yes, the form could send the information... 

But, like we mentioned about the benefits of j Query and Ajax 
in the previous chapter, you don’t have to reload the entire page 
to get or send data, so the user won’t see the whole page reload 
each time. However, before you send the data to the server using 
j Query and Ajax, you need to get it ready for sending. 
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some serious serializing 


Format the data before you send it 

Before we can send information to the server (using Ajax), we need to do a little prepping 
to get it into a format that the Ajax call can send and the server will understand. To do 
this, we serialize our data into a single object, so the Ajax call can send it as one single 
package, jQuery offers two form helper methods for serializing data: serialize and 
serial izeAr ray. The former will join all the inputs of your form into a single string 
of key/value pairs, separated by ampersands (&). The latter will create an associative 
array of key/value pairs, which is still a single object but is much more structured than the 
result of the simple serialize method. We’ll take a look at both, but we’re going to use 
serial izeAr ray for our marathon data. 


value= M 1 M / > 
value= M 2 M / > 


serialize 

<form id= M my_form M > 

<input type= M text M name= M a' 

<input type= M text M name= M b' 

〈input type= M hidden" name= M c M value= M 3 M / > 
</form> 

$("#my_form n ) .serialize(); 

> / 


serializeArray 

〈form id= M my_form M > 

<input type= M text M name= M a M value= M 1 M / > 
<input type= M hidden" name= M c M value= M 3 M / > 
</form> 


$( n #my_form:input").serializeArray(); 

V -- ^*V^ - / 

丁 he -Pov-ms ID scle^-tor, -followed r^\\ 

t 七 t ih P u ^ d. scv*>aV«z^A^ a 7 

T“is tdls the sclc^-to\r -fco ohly look 

a 七 HTML dcrwchts - type “ihput” ^ 


End result 


a=l&b=2 &c=3 


End result 

name : 11 a'\ 
value : "1" 

name : 11 c'\ 
value : n 3 n 
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Send the data to the server 

jQuery provides a shortcut method, post, dedicated to sending data to the 
server. The post method takes several parameters, including the URL you 
want to send your information to, the information you want to send, and a 
handler function that will run when the POST is complete. 


$ 叫 



.post(url_to 

7 

The URL you wa^-t 
} ) ； "to stv\d the da-ta -to 


send, data, function (j son) 


The daia you waht -to 
schd, y/W\C\) has bcch 
scHali^d already 


jQueiy Code Magnets 


Ruh this 

Qllbd 匕 k 
ioh. 


丁 lie v"c*tuv-r\cd m 扣 object 

called jsor\. IW 七 >Mo^y about 
七 iiis \ri 分七 y\o>N) II *to 

i 七 a b ••七 lat 吖 m (Laptev. 


Create a click event listener on #btnSave that takes all the data in the form and serializes it. Then 
send this information to the server using a jQuery post method. Get the URL to post to from the 
action attribute of the form. Also, create a clear Inputs function that sets all values of the form 
fields to blank, if the post is successful. You will also need to cancel the default submit action of the 
form (by returning false), using a . submit listener on the form with the ID of addRunner. 


$ ( '_') . click (function () { 

var data = $( n #addRunner : input") ._(); 

$ . post ($ ( n #addRunner " ) . attr ( ' action ' ) , _ , _(j son) { 


if (j son.status == 

: "fail") { 


alert (json. 

I 

)； 

「 serializeArrayJ 


if (j son . status == _) { 

alert(j son.message); 
clearlnputs(); 

} 

}, n j son n ); 

})； 

function _{ 

$("#addRunner : input").each(function(){ 
$(this) .val ('')； 

})； 

} 

$ ( M #addRunner" ) ._(function () { 

return false; 

})； 


message 



「 data j 



I submit j 


clear 工 nputs () 



my—scripts.js 
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jquery code magnets solution 



jQueiy Code Magnets Solution 


Create a btnSave click action that takes all the data in the form and serializes it. Then send this 
information to the server using a jQuery post method. Get the URL to post to from the action 
attribute of the form. Also, create a clearlnputs function that sets all values of the form fields 
to blank if the post is successful. You will also need to cancel the default submit action of the 
form, using a • submit listener on the form, with the ID of addRunner. 


(▼ 


#btnSave ) • click (function () 


var 


data = $( M #addRunner : input") 

.post($("#addRunner").attr('action '), 
' status == "fail") { 

)； 


if (j son 

alert (json 





message 


if (j son.status == 

alert(j son.message); 
clearlnputs(); 


success M 



0 ; 

\ function [(json) { 

the el^'kioh attv-ibu-tc o( 
the -Po\rrw you to pos-t ， 

Chcdk \rrtu\r^ value -the 
scv-vc\r, se 七 m 七 he PUP Code, ho sec 
4 七 he POST v/ds suddcss-ful oV" 灼 ot 



( M #addRunner : input").each(function() 
$(this) .val ('')； 



}) 


IXse an ttTAIL clcrwcht -filtcv* -fco 
a^css dll -the -fields \y\ -the 
set therw all -fco be crupty. 


("#addRunner" ) . J submit j_ (function () { 
return false; _ _Ca^cl *tKc dc-faul*t submit a^*tioir\ *tKc -PoVi 


})； 


-to allow j^uev-y Co At 'm -the button dlidk 
ey/er\i io -take cart sc^d'm^ *thc da*ta. 



my—scripts.js 


Tesr DriVq - 

Your page isn’t going to look any different with these recent additions. You should, however, 
update your my—scripts.js file with the code you just created. Then, open up your index.html 
page in a browser, open the “Network” tab (Chrome) or “Net” tab (Firebug); you should 
see the POST to the service.php file happening each time you press the btnSubmit button. 
There will be a POST listed in the Request Method section of the Headers tab. The 
Form Data will also be listed there. Now we just need a place to put it... 
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handling json data 


Store your data m a MySQL database 


Relational Database Management Systems (RDBMS) are extremely 
organized applications designed to store, organize, and remember 
relationships between your various pieces of data. 

Often called database servers, they come in various shapes and sizes (and 
costs). For our purposes, we’ll use a free database server called MySQL. You 
communicate with a database server in a language it can understand, which 
in our case is SQL A database server typically runs alongside a web server, 
sometimes on the same server, and they work in concert to read and write 
data and deliver web pages. 


"The ih /WyS^L 

-Pov- 

没 uevy L^h^ua^e. 

'Z 

MySQL stores 
data inside ol 
database tables. 



T\,t datakasc 

ytoved as Ucs o'f 
V^d dhrWe, W 七《七 dowt 
v^cdcssa^lY V^avc *to kc- 


The web scv-vcv- pvodcsscs web 
page \rcc\ucs-ts, \ru^s PUP s^v-ip-ts, 
\rctu\r^s HTML 

Client browser 


Server computer 


MySQL database 


TVic database server 
reads and data 
-(•vow'/*to *tV>c 


MySQL databases are organized into tables, which store information as rows 
and columns of related data. Most web applications use one or more tables 
inside a single database, sort of like different file folders within a file cabinet. 


A /WyS^L da-tab^se scv-vcv* 

Uh 匕 ohta’m multiple daiabdses 


A database 
mu Itiplc table 



s. 


SQL is tke cjuery 

language usect 
to communicate 

witk a MySQL 

ctataliase. 
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fire up the database 


Create your database to store ruwwer iwfo 



k 卿 Ba^ 


To get your database, table, and users set up, we’ve written the SQL for you. Open 
up MySQL Workbench, open a new connection, and run the following SQL. 


create database hfjq race info; 


Cv-catc a database called 


CREATE USER 'runner_db_user'@'localhost' IDENTIFIED BY 'runner_db_password'; 

GRANT SELECT, 工 NSERT,UPDATE,DELETE ON hfjq race info.* TO 'runner db user'@'localhost 


use hfj q race info; 


Tell s^ifb 七 ^ 七七 ^ 

fiCtC V"cU*tcs *to 
youV" d3"t3^3sc- 


CREATE TABLE runners ( 

runner—id INT not null AUTO_INCREMENT, 
first—name VARCHAR(100) not null, 
last—name VARCHAR(100) not null, 
gender VARCHAR(1) not null, 
finish_time VARCHAR(10) A 
PRIMARY KEY (runner id) 


Cv~C3"tc d usc\r ； ddllcd \ruhhC\r__db usev*, 
9 ivc it 3 password -to log m wi-tha^d 
allow that usc\r -to get, set, updaie ； av\d 
代啪 ove data -the database. 



Cv-ca-tc a -table dalled vuirmevs Kolds all 
七 he v/arrt *to vemermbev about 

-tKc people y/iio -f misled v-adc- 
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Tesr Drii/q 


Open up MySQL Workbench and open a connection to the server. Paste the SQL from the 
previous page into the Query pane and press the lightning icon to run the SQL code. You 
should get success messages in the Output pane at the bottom. 


n 


MySQL Workbench 


我 SQL Editor (Localhost) 

f @o$i 雄 o * 




a 


ACTIONS 



^ Add Schema 


1 

2 

_ Add Table 


3 

[3f Add View 


4 

^ Add Routine 


5 

6 

SCHEMAS 

tv 

7 



8 

► g test 


9 



10 



11 



12 



13 



14 



15 


【口 Query 1 O 

create database race info; 


10096 


use racejnfo; 

日 CREATE TABLE runners( 

runner_id INT not null AUTO_INCREMENT, 
first_name VARCHAR(100) not null # 
last_name VARCHAR(100) not null # 
gender VARCHAR(l) not null, 
finish^time VARCHAR(10) . 

PRIMARY KEY (runner^id) 

):1 


10:15 


Overview _oj Output I Snippets O 



Actions Text Output History Clear j 






Time 

Action 

Response 

Duration / Fetch Time 



O 

1 

22:36:02 

create database racejnfo 

1 row(s) affected 

0.000 sec 



O 

2 

22:36:02 

CREATE USER 'runner_db_user^'localhost' IDENTI... 

0 row(s) affected 

0.001 sec 



o 

3 

22:36:02 

GRANT SELECTJNSERT.UPDATE,DELETE ON race」... 

0 row(s) affected 

0.000 sec 



o 

4 

22:36:02 

use race_info 

0 row(s) affected 

0.000 sec 

Connection Information 



CREATE TABLE runners( 

runnerjd INT not null AUTOJNCREMENT, 

0 row(s) affected 


Name: 
Host: 
Server: 

Localhost 

127.0.0.1:3306 

MySQL 

5.5.14 

o 

5 

ZZ'.do.OZ 

0.091 sec 

Version : 


User: 

root 



Action: 


Query Completed 
^~ — 




/a 


We’ll get to that next. 

The SQL you just ran creates a database, creates a user, grants 
access to the database for the new user and creates a table to store 
the runner info. Let’s see how you can put some data in there. 
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slot a goes in tab b... 


Awatomy of aw iwscrt statement 

There is one primary way of putting data into our database, another way to 
change/update it, and a third to get it back out again. We’ll look at getting data 
out in a bit, but for now, let’s focus on putting data into our database tables. 


To put data into database tables, we use an insert statement. 


Tell 

七 -table -to \>u*t 

data m-to- 


insert into [table name 



， ^olumhs whcv-c wc wah-t 

put -the ddia 



column namel, column name2 r column name3) 


values ( f valuel f1 value2 1 r 1 value3 1 ); 


Use i\\c kevv/ov-ds 
w *mscv-*t . 


key Wolr d U valucs w idl 
% that the li: 

f 仏1_衫 is -Pihishcd, ahd 

the actual daia is 


/\ domma-sefarated l»st data you 

b> tabic, 

lis-t -to tv^c list Columns listed 

|y\sc\rt *t^c data 
*m*to i\\t table. 


pa-tabasc 

-table 


Pata values 



insert statements allow you to put information into a 
single table. They are mostly used to insert one record at 
a time, but some advanced SQL users can create insert 
statements that add multiple rows to the table. For our 
purposes, however, we’ll stick to the one-at-a-time syntax. 


Rclatiohal 

daiab^se 



⑽ a 

{/o *tV^C "tdWc- 


It’s recommended that you specify the columns in 


the order you want to insert your data, 
although it’s not necessary. Not specifying 
the columns can lead to data issues, since 
it will automatically put the first value 
in the first column, the second value in 
the second column, etc. You’ll need very 
intimate knowledge of your data tables to 
be confident of using this method. 



The order of the column names and 
values matters! 

The values must be listed in the exact 
same order as the columns. That’s how the 
database knows where to put the data. 
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E 站⑽鉍 


Write the SQL insert statements to insert the data you already have in your XML file into 
your database. You should insert one record at a time into the runners table you created earlier. 
We’ve done the first one for you. 


insert into runners (first—name, last—name, gender, finish—time) 
values (* John ', 'Smith ', 'm*, *25:31*); 
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exercise solution 



SpLyilpH 


Now that you’ve written all the SQL necessary for inserting the runners into your database 
tables, open up MySQL Workbench and run your code. 


insert into runners (first—name, last—name, gender, finish—time) 
values ( ' John ', ' Smith ' r 'm','25:31'); 

•mse\r 七 m*(x> rurmevs f inish 一 time) 

values rJadob^Walkcr/mVZ ?：?^)； 

*msc\rt m*to rurmevs yhdcv, f mish 一 time) 

values ('/l/Iav-yVB^owhV^/^^OlO; 

*msc\rt m*bo rurmers ^Chdcv, f mish 一 *time) 

values OJermyVP 狀 W/2^:0 午 ’)； 

*msc\rt m*to rurmers gchdcv, f inish 一 *time) 

values (Tvahk^/JohesV^V^^SO; 

•mser 七 m*to rurmevs last—hame, ^ChdcV) *f mish_*time) 

values ( l Bob’/Wop„mV2^0O ; 

*msc\rt m*to rurmers f mish 一 time) 

values rJar^/SmrthWZ^Of); 

*msc\rt m*bo rurmers jChdcv, f mish 一 *time) 

values rRyarA l Ri^,V, l 2*0:2 • 午 '）； 

*msc\rt m*bo rurmers (f irst 一的 last^amc, gchdcv, f inish 一 *time) 
values OJustmVvJohesV 眯 ’/2*W); 


But now that we have the runners 
in the database, how do we get them 
out again for our web app? 



Time for a new language: PHP- 


Don’t worry! We’ll give you just enough 
PHP chops to do all the server-side 
communication you need — including 
talking to a database server — and that’s it. 
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Use PHP to access the data 

PHP is a programming language, and it needs an environment to run in: 
a web server with PHP support. PHP scripts and web pages that rely on 
the scripts must be placed on a real web server, as opposed to just 
opening a script directly from a local filesystem. 


you do have s web scv'vcv- 

•ms^alled loyally a^d i-t has 
PHP suppo\rt, thch you 
七 out PHP sMyis div-c^-tly 
Oh youv- lodal dorhputev-. 


Web browsers 
know nothing about 
PHP and, therefore, 
have no ability to 
run PHP scripts. 



U^I.kc HTML v/ck pays, ^eM 
be o^td loyally m a v/ck 
PHP must always be u o^^cd 
a URL a y/cb server. 


This PHP sdHp-t is just a 

buhdh o-f Codt 

"to "the web b\rowscv". 


The y/cb scv"vcv" ur\dcvs*tar\ds 七 Wis 
pHP CoAt d^d \ru^s i\\t s^iptf 


A way h> tell a web P a 9c is bei.a 

tin ^ ' Wcb ^ look 4, the 

URL s^r-ti.9 with Wc\> P^es opced 

as lo ^! -P fl « always stav-t with {{ Uc. 



Web servers with PHP 
support are equipped to run 
PHP scripts and turn them 
into HTML web pages that 
browsers can understand. 


PHP scripts must te 
run on a wet server 
or tkey won’t work. 


PHP and MySQL? 

I thought we were learning 
jQuery here! What gives? 


There will be jQuery, we promise. 

But first, let’s look at how we get our PHP file 
to handle POST data, too, so it can write it into 
the database. We’ll also look at some of the 
important things to remember when dealing 
with sending information to your server. 
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Handle POST data on the server 

We’ve already looked at the special object created to handle the transportation 
of information from the form in the browser to the server: the $_POST 
object. It’s an associative array of all the information you sent, using the name 
(not the IDs) of the HTML elements as the key for the associative array, and 
the information in the HTML element as the value of the associative array. 

The PHP code on the server reads the $_POST object and determines what 
information has been sent to the server. 

You can get the information back out of this array by using the key you sent with it 
(the name of the HTML element). This will return the value in your PHP script. 


\A/v'i*tc value *to 




ihc HTML 

C dollc ^d dais 

° h tnc -ro\rrh 


echo $ POST [ ▼’txtFirstName” : 


dv-ca*tcd *to Kdv>dle daia 奶七 usm^ 
POST -to a Pl+P (\\t- 



Hey, whafs left to do? 
I want to hit the beach! 


We’re almost at the point where we can grab the data 
back out of the database and figure out how to display 
it in our Finishers lists. But first, we need a little more 
PHP to get us connected to the database … 
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Cowwcct to a database with PHP 


Remember how when you went through the PHP installation process, you 
selected a particular library near the end of the process? 


PHP 5.2.17 Setup 


Choose Items to Install 

Select the way you want features to be installed. 



Click the icons in the tree below to change the way features will be installed. 





1 X ▼ 

Mhash 

Hr 

MSSQL> 

- j ▼ 

MySQL 

' x z 

MySQLi 

1 


Cancel 


MySQL functions 


Disk Usage 


Next 


This feature requires 2076KB on 
your hard drive. 


Reset 


Browse.. 


This library will enable PHP to talk to the MySQL database. We’ll 
use this library to connect to the database we’ve created so we can 
start reading out the runner data. 


PttP tajs. 


The die 

outpu-ts d 
message dhd 
Chds the 


is a ih 

the PHP lib\ra\ry -tha-t wc rnduded 
du\rihg the ihS-tolll o-p PHP. 



T\\t scv-vcv" 

database is 


The MyS^L 

usev- you v/a^-t 
"to Coy\y\tt{, ds 


TV^c passwov-d 

-for usev" 


<?php 


mysql—connect('127.0.0.1' A 'runner 一 db—user', 'runner—db—password') 

OR die( 'Could not connect to database .')； 
mysql select db('hfj q race info ’）； 


?> 


echo "Connected! 




y/ir»a*t 


select 一 db *LelU PHP 

database -to mc. 


Close 
PttP tajs. 


-to -the Sd\rccr> i-P ihc database 
匕灼 is suddcss-Pul. |-P ii is ⑽七 , 
七 he sdv-ipi will no 七 v-cadh 七 his pomt 



service.php 
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test drive 


^fesT Drii/q 


Open up your favorite text editor and add the code from the previous page. Save the 
file as service.php in the same directory as your index.html file for this chapter. Open 
service.php \n your browser to see the results of your database query. 

Don’t forget, the PHP code must run through your web server, so the URL should 
say http ://, not file:/ /. 


回 


^ Redirecting 


K 


G © thinkjquery.com/chapterO9/stepl/semce,php 


\ 


Connected! 


0 O 



Well, that doesn’t look very 
exciting. Sure, we can connect... 
but I’m still not seeing any data! 




You’re right. 

Just like INSERT-ing, there’s a special syntax for reading the data 
back out again. Let’s look at how that works. 


there ^ are no ^ 

Dumb Questi9ns 


Is MySQL Workbench the only 
way to interact with or manage a MySQL 
database? 

No! There are other ways and 
other tools. PHPMyAdmin is a common, 
web-based tool used to manage MySQL 
databases. You can also use a terminal 
window to manage the database and the 
data from the command line. 


What other kinds of PHP libraries 
are there? 

There are many different PHP libraries, 
for a wide variety of purposes. These 
range from SSL, Emailing (SMTP or IMAP), 
Compression, Authentication, other database 
connections, and many more. Type “PHP 
libraries” into your favorite search engine to 
see a list of available libraries. 
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Use sdcct to read data from a database 

To read data from databases, we use a select statement, and the data is Fov plchty mov-e 

returned in a resultset. The resultset is a collection of all the data you asked for ih-Po oy\ Pt^P, 

in your select query. Using a select statement, you can also join several da-tdbases^ dhd -tables ； 

tables, so you can get data from more than one table in the same resultset. U P a 匕 0 py J Wcad 

Fiv-sl PUP f My£^L. 


/\ domma-scfa\ra*tcd 
七 £.olum^s 七 Wt v/a 於七 

■to pull data -f \rom. 


Tell s*ta*tcw>cr\*t 
-table -to pull 
*tV)c data -f \row>. 


The u as^ w keyword 

tells w o\rdc\r by W how 
■to o\rdc\r the v-csults 
( 说 -Po\r asdehdih0, 

dcst -Po\r dedehdih^). 


select column_namel, column_name2 from table_name order by column namel asc 

The u —tV, key—d The keyword tells 


kitks s{^itnstv\i 

Tke SQL select 

statement retrieves 
columns oi data from 
one or more tables and 
returns a resultset. 


"the stcl-tcrwCht that the 
list o*f dcsi\rcd dolumhS is 
•fihished ； dhd whc\rc "fco yt 

七 he dd'bc)hwt. 


TV^c w ovdcv- by' keyword, 
-folloy/cd by ov\t or move 
doluw\^ y\ 3 w>CS) sov*ts 七 
VC'tuV'^cdi 
ovdev- y/c "bell i*t- 


%|harpen your pencil 

C rp^tp p qo 1 or*- 


Create a select statement for the data we need to display the runners on the website. 
You’ll need to read out the first—name, last—name, gender, and finish time from 
the runners table. Sort the data so it comes back ordered by finish time, lowest to 


highest. If you need to, look back to page 336, where you created the table, so you can get 
the column names right. 
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sharpen solution 


^itorpen your pencil 

Solution 


You’ve just created your very own SQL statement to retrieve the 
runners from your database. 


l»s*t toluiw>y\S you *to 


ttow you wd 灼七 "the 

data ovdc\rcd 


， - ^ A A f — - 、 

SELECT *fi\rs 七一 hame, las 七一 hame, *fihish 一 *time FROM \ruhhC\rs o\rdcv by *fihish 一 *time A^C 

-- - / - 

T\\t -table wi^cv-c Y olA 灼七 

{p *t^c data 


： V"om 



Tesr DriVq 


Using MySQL Workbench, run your select statement to see all your 
data as it will be returned to you in the resultset. 


MySQL Workbench 


SQL Editor (Locaihou) 




ACTIONS 

f Execute SQL File 
♦ Add S<h«ma 

坊 Add T*»e 

8 Add view 
Add Kowtin« 

SCHtMAS 

▼ r«ct.info 
▼抒 Tablet 
▼ E 

f runntr m td 
曹 ftr»l.ri4m« 

♦ lA«f v n*me 

♦ gender 

♦ flnlsh.ilmc 



尹爱 AO 鵪 命 o • 


last.njac. gender. f1n1sh_t1«ic fro* runners ： 


46 2 


I Ovtrvkw Q I Output Q § Snippets O | □ Query 3 K«vuU 

IO O O 01 丨瓣进幽丨年 || 妙 | fttttr a 

Ust.nam^ flrtithjime 




Routines 


flrtl.nai 
i John 
Jacob 
Mary 

jenny 

Frank 

Bob 

Une 

Kyon 

Justin 


Smith 

Walker 

Brown 

Ptfrcr 

ion<$ 

Hope 

Smich 

Met 

jon«s 


2S31 

2SS4 

26:01 

26:04 

26:08 

263S 

28:04 

2S24 

29:14 


Query Compkttd 



Ifs great that I can see the 
data in Workbench, but don’t 
we need it on the web page? 


Yeah, we do. 

Let’s look at how we can get 
information from the database 
for display on our page. 
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fret data with PHP 

Up to now ， we’ve looked at some very basic PHP and some not-so-basic PHP. We’ve seen how to write 
some basic information to the screen and how to connect to a database and write a select statement to 
get information out of a database. Now let’s see how we can get information from a database and write 
that information to the screen. 



PHP Code Magnets 

Rearrange the magnets below to complete the PHP code that creates a function called 
db_connection, which manages the database connections. Also create a $ query variable 
and set its value to be the select statement you wrote earlier that selects all the runners 
from the database. Then create a $result variable that will call the db—connection 
function, which passes the $ query variable as a parameter. Last, using a while loop, go 
through each row of the resultset —— which is an associative array —— and print it to the screen. 


<?php 

$query 
order by 


SELECT first—name, last—name, gender, finish—time 

ASC n ; 


runners 


$result 


($query); 


while ($row = mysql—fetch—array( 
print_r (_); 

} 

db connection( 


,MYSQL ASSOC)) { 


mysql—connect('12 7•0•0•1', 'runner—db 一 user', 'runner—db—password') 

OR _ ('Could not connect to database .')； 

(▼hfjq race info'); 


return mysql query($query); 


H 


$row j 


mysql—select—db 


?> 




j $result~| 


ly^tiZrj 



service.php 
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PHP Code Magnets Solution 

With just a little bit of PHP, you're now grabbing the data from the database and getting the 
results returned in an array that can be displayed on your web page. 


<?php 


$query 


SELECT first name, last name, gender, finish time 


$result 


| finish—time 

O 丄丄 O • 丄 LLC 

_ASC M ; 

t = 

db connection 
— 



runners 


($query); 


while ($row = mysql 一 fetch—array (j $result MYSQL—ASSOC)) 

print r( 




mysql connect('127•0•0•1', 'runner—db 一 user' , 'runner—db—password') 

OR 丁 die I (’Cou ld not connect to database. ' ) ； 

( 1 hfj q_race_info'); 

return mysql query($query); 



?> 


service.php 


So, can a select only pull all my 
information from a table? I see I can limit 
the columns I get back, but what about 
the rows? 

Yes, you can limit the rows you get back, 
by using a where clause. We’ll look at this a 
little bit more in Chapter 11, but you can pass 
in a filter condition in the where clause, and 
only get the rows that match your condition 
returned to you in a select statement. 



Can I only get data from one table 
at a time? 

No, you can join as many tables as 
you'd like in your query, often by a common 
identifier, and also in the where clause. 
Joining many tables together can slow your 
database queries down a lot, so you need to 
be careful when doing it. For more information 
on this, look at Chapter 8 of Head First PHP & 
MySQL or Chapter 2 of Head First SQL. 


What database is on 127.0.0.1? I 
see my website on “localhost.” What’s 
the difference? 

Good question, and the answer is 
nothing. 127.0.0.1 and localhost refer to the 
same thing—the computer/server you are 
currently working on. 
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Tesr DriVq - 

Update your service.php file with the code you just created and then open it in your browser 
to see the results of your database query. Don’t forget, the PHP code must run through 
your web server, so the URL should say http ://, not file:/ /. 


：« Redirecting 



G O thinkjque ry.co m/c hapterOS/step2/service.php ^ 



Array ( [fes!_name] => John Past_name] => Smith [gender] => m [feish_time]=> 
25:31 ) Array ( [fest_name] => Jacob Pa5t_name] => Walker [gender] => m 
=> 25:54 ) Array ( [&st_name] => Mary [last_name] => Brown 
[gender] =>f [febh_time] => 26:01 ) Array ( [first_name] => Jenny [last_name] 
=> Pierce [gender] =>f [£msli_time] => 26:04 ) Array { [fest_name] => Frank 
[last_name] => Jones [gender] => m [feLsh_time] => 26:08 ) Array ( [Srst_name] 
=> Bob [last_name] => Hope [gender] => m pciish_tiine] => 2638 ) Array ( 
[first_name] => Jane [last_name] => Smith [gender] => f [5dsJi_time] => 28:04 ) 
Array ( [frst_name] => Ryan [last_name] => Rice [gender] => m poisiijitne ]=> 
28:24 ) Array ( [&st_name] => Justin [last_name] => Jones [gender] => m 
[feli_tnne]=> 29:14) 



The ehd v~esul 七 
o( y/vitmg all 
七 he data out b> 

the sd\rcc 灼 




Well, ifs data all right, but it looks 
complex and confusing. Can we do 
anything to pretty it up a little? 



Definitely. 

What we see there is just a bunch of arrays written to the 
screen. They do contain the data we need, but not quite in 
the format we want. Luckily, there’s an efficient method for 
arranging data in a format perfect for defining data structures. 
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an easier way 


JSON to the rescue! 


JSON, short for JavaScript Object Notation, is a lightweight data-interchange format. It is easy for 
humans to read and write. It is easy for machines to parse and generate. That’s what makes it perfect for 
structuring and transferring data. It’s based on a subset of the standard used to define JavaScript, and 
is language independent. That means it can be used with pretty much any programming language. It is 
more efficient at transferring data than XML, and is based on name/value pairs, like associative arrays. The 
values in JSON can be strings, numbers, arrays, objects, Boolean values (true or false) or null. 

0-tV^cv- h\^v\ *tV)C rooi element, 

y\o lo^idal ^ 

between 丁 s 

v/V^y we V^ad -to w -f mdO ;, ov\t- 


a c 



vs. 



<?xml version= M 1.0" encoding= M utf-8 M ?> 
<books> 

<book> 

<title>The Color of Magic</title> 
<author>Terry Pratchett</author> 
<year>1983</year> 
rC/book> 

<book> 

<title>Mort</title> 

<author>Terry Pratchett</author> 
<year>1987</year> 

</book> 

,<book> 

<title>And Another thing...</title> 
<author>Eoin Coifer</author> 
<year>2009</year> 

多 </book> 

</books> 


Multiflc topics *tjs 

mdredse aw>our\*t 
da-ta be” *tv-ans-fc\rv-cd. 



删 

The \roo*t element 


\^七 should Const 


The a\r\ray iha-t s-toves -the data 


Ha 匕 h objed't 

is scyaratcd 

by donr>nr> 3 s. 

r" { 

^.acM objedi 
is cndloscd m 
tuv-ly bv-ates { }• 


TV^c r\3w\c/vdluc f> 

广 ^ separated by Co\ov\ 

title : 'The Color of Magic', 
author : 'Terry Pratchett' 

year : 1983 ^ 

fv-opev-ty 

is sepav-a-ted 
bv Commas. 

title : 'Mort ', 

author : 'Terry Pratchett ', 

year:1987 

s*tv"m 5 value is 
(Chdloscd m <\uo*tcs. 

title : 'And Another thing. 
author : 'Eoin Coifer', 




year:2009 


V 


Kumbcv-S do〆 七 
v\ttd quotes. 




To access the information in the JSON object, you can use the same notation that you do for any 
other object: the dot (.) notation. Arrays inside the JSON object are like other JavaScript arrays 
and have the same properties, like length. In our example JSON object above, you would find 
out how many books were returned by using books . book. length. Different JSON objects 
will have different structures, so you might not need as many dots to access the array object. 
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jClucry 4 - JSON 55 Awesome 


Since JSON is so prevalent and easy to use, the good folks at jQuery 
built a special shortcut just for dealing with getting JSON data: the 
get JSON method. 


sW 七认 七 . 



Call ytOSON method. 

getJSON(url to load, 

7 _ 



The URL you "to 
load the dd'td (von\ 


r 


Ruh this ^llb^k ^Uh^ioh. 


function(j son) { 



TV irc-tuv-hcd daia, ih dh 
obj^t^Hedjsoh oh 
this ih a set,). 


If this seems familiar, that’s because it’s almost the same as the 
post method we used earlier to get the data from the form. This 
simple method is a shortcut for the a j ax method, with several 
parameters already set for you. To make this call without the 
shortcut, it would look like this: 


$.aj ax ({ 

url : url_to load, 
dataType : 'j son', 

data : json, 

success : function(j son) { 


})； 



^ 4 ^ 


But the data we have isn’t in 
JSON format, just a series of 
arrays. Can we turn those arrays 
into JSON ? 


Yes, we can. 

As luck would have it, the PHP folks 
thought of this already. Let’s have a look 
at a few more PHP basics, and then see 
how to combine those with other PHP 
functions to get our data in JSON. 
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A few PHP rules... 


Let’s face it, nobody really likes a bunch of coding rules, but there are just a 
few more things about PHP — much of which are syntax — that we should take 
a look at to help you wrangle your data for jQuery. Thankfully, we’ve already 
seen many of these concepts in relation to JavaScript, so we’ll keep this as 
quick and painless as possible … 


PHP basics 

1. All PHP code needs to be wrapped with <?php and ?> tags. 

2. You can intersperse PHP with HTML, using the 

<?php and ?> tags around your PHP code 

3. All lines of PHP code must end with a semicolon (;). 


<div><span> Hello 
<?php 

echo "Bob"; 

?> 

</spanx/div> 


Rules for variables 

1. All variables must start with a dollar sign ($). >— 

2. After that, they must contain at least one letter or 
underscore, and then any combination of letters, 
numbers, or underscores. 

3. Dashes (- )，spaces (), and all special 

characters (except for % and —) are not allowed 

in variable names. ^ 


<?php 

$u = "USA"; // OK 

$home_country = "Ireland"; // OK 
$another-var = "Canada"; // Causes an error 
?> 


Rules for loops 

1. PHP also contains for, while, and do . . . while 
loops — all with the same syntax as JavaScript. 

2. PHP also contains an extra loop mechanism called 
the for each loop, which will go through all the 
elements of an array one by one, using the as 
keyword until it reaches the end, and then stopping 
automatically. 


<?php 


for 

($i = 1 ； $i 

<=10; $i++) { 


echo $i; 


I 

while ($j <= 10) 

{ 


echo $j ++; 


j 

$a = 

=array(1, 2, 

3, 17); 


foreach ($a as $v) { 

echo "Current value : $v.\n"; 

} 

?> 
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A few (more) PHP rules 


There are a few more rules that will help us get the data we need, 
format it correctly, and get it onto our web pages. 

Rules for arrays 


1. You can create new arrays using the array keyword, 
similar to JavaScript. 

2. You can access the array values using the index of the 
item, in square brackets [ ], like JavaScript. They 
are also zero-indexed, like JavaScript. 

3. Arrays can also be associative, which means you can 
use a key to access the item in the array, instead of the 
index. These are called key/value pairs. 

4. To assign a value to a key in an associative array, you 

use the => operator. 


<?php 

$my_arr2 = array('USA 1 , 'China ’， 
1 工 reland 1 ); 


echo 

$my arr2[2]; 

// 

Prints " 

Ireland” 

$arr 

=array("foo' 

▼=> 

"bar ", 

12 => true); 

echo 

$arr["foo"]; 

// 

Prints " 

bar" 

echo 

$arr[12]; // 

Prints true 

?> 






Rules for conditionals 

1. The if statement has the same syntax as 
JavaScript ， as does the else clause, and the else 
if clause. 

2. The comparison operators are all the same as 

JavaScript. 

3. Logical operators are also the same as in 
JavaScript, with the addition of descriptive words— 
and, or, and not — which can be used in place of 
the operators. 


<?php 

if ($x > $y){ 

echo "x is greater than y"; 


elseif ($x 


$y) { 


echo ，，x is equal to y"; 


else 


echo M x is smaller than y"; 


} 

?> 





Rules for writing to the screen 

1. The keywords echo and print write to 
the screen. 

2. You can write out the contents of an array using the 
print r command. 


<?php 

echo "Bob"; 
print_r($my_arr2); 

?> 
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just one array 


Format the output usiwg PHP 

OK, now that we’ve got that out of the way, let’s see what PHP can do for us! 
The j son—encode function in PHP allows you to take an associative array 
and convert it into aJSON-encoded string of values. 


1AM 七 e 七 he value ⑽七 
*to tdllcd 

-file—i c., a Wowser ov 
a 於 aja% ^all, eU. 


echo 


Call "this PHP -fco tr\CoAt 

七 he avv-ay m -the J£0hl -Pov-^a-t- 

/ 

j son encode(array name) 



Pass m 3v-yay 
{jo tTiCodit- 


But before we can encode the data, it must be in a single associative array. 
We’ve already seen a method to loop through the resultset and see each 
associative array in there. What we need is a way to take each of these arrays 
and combine them into a single one. Using the PHP function array_push, 
we can add new items onto the end of an array. 


f 


Cv-catc a v\cyN, erwp-ty av-vay. 


$my array = array() 



Pass m you 

*to add -to tiic av-vay. \v\ 
this cast, a^o-tiicv- associative 
av-vay is ytt” added -to 
i\\t fmy^arvay a\rvay. 


array push($my array, array( f my key T => f my val▼)) 


Call the away 一 push 

y/i*tli pav-arwetev-s. 



Pass *tKc dcstmatior\ avv-ay 
as *tiic fav-arwc*tcv- 


A r\^t /value paiv- bemj 
added "fco -this av-vay 


Gee} Bits - 

The j son—encode function only became available in PHP version 5.2. If you’re 
using a version earlier than that, either update your version of PHP or type "json_ 
encode PHP alternatives” into your favorite search engine, and you’ll find out 
just how the folks at PHP created that function. That way, you can create your 
own so you can take advantage of its cool features. 
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Dumb Quest? 


9ns 




Did the jQuery folks come up with JSON? 


No. Douglas Crockford, Yahool's JavaScript architect, invented 
JSON to be what he calls a “fat-free alternative to XML.” He explains 
his reasons for that designation here: http://www.json.org/fatfree.html. 


Isn’t JSON just JavaScript?? 


Yes and no. JSON is based on a subset of JavaScript, ECMA 
262 Third Edition, but can be used by a multitude of languages for 
data transfer. To see the list of languages that use JSON, visit 
http://www.json.org/. 

So, if JavaScript and PHP have such a similar syntax, why 
can’t I just use JavaScript to do what I need?? 

Like we’ve mentioned, PHP is a server-side scripting language, 
and can interact with the web server and databases on your behalf. 
The code is executed on the server, generating HTML, which is then 
sent to the client. JavaScript, on the other hand, only lives in your 
browser, and interacts client side. 


All right. What is PHP again? 


PHP (recursive acronym for PHP: Hypertext Preprocessor) is 
a widely used, open source, general-purpose scripting language that 
is especially suited for web development and can be embedded into 
HTML. 




So where did PHP come from, then? 


Good question. PHP first appeared back in 1994. It was 
created by Rasmus Lerdorf as a way of displaying his resume online. 
He released the the source in June 1995, which allowed other 
developers to update and fix bugs. It has since taken off and is used 
in over 20 million websites around the world. 


o 妙 x - 

k) 

You’ve just put a bunch of new learning about PHP, MySQL, and JSON 
、 M into your brain. We’re about to dive into a big exercise to pull everything 

together, so take a quick break and have a cup of coffee, take a walk, or 
do something else to give your brain a rest and get ready for what’s to 
come. When you’re done, turn the page and dive in. 
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long exercise 



tP^S ExeRciSe 


Update your my_scripts.js file with new function, called getDBRacers, which calls the service.php 
file. This call should return a JSON object and then should alert out the number of runners that 
were returned. Also update the startAJAXCalls timer to call this new function instead of the 
getXMLRunners function. Then, update service.php to send back the runners'retrieved data from 
the database, JSON-encoded. 


function startAJAXcalls(){ 
if (repeat) { 

setTimeout( function() 


startAJAXcalls(); 

}, 

FREQ 


function getDBRacers(){ 

$ . get JSON (. function ( 

.(j son . runners.); 


})； 

getTimeAjax(); 



my—scripts.js 
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<?php 


$query = "SELECT first—name, last—name, gender, finish—time FROM runners 
order by finish_time ASC "; 

$result = .($query); 

$runners = array(); 

while ($row = mysql—fetch—array($result, MYSQL—ASSOC)) { 

.($runners, array('fname' => $row['first—name'], 'lname'=> 

$row['last_name '], 'gender' => $row['gender'], 'time' => $row['finish—time'])); 

} 

echo .(array ( "runners "=> .)); 

exit; 

function db_connection($query) { 

mysql 一 connect('127•0•0•1', *runner_db_user', 1 runner_db—password') 

OR die(fail('Could not connect to database .'))； 
mysql—select_db. 

return mysql_query($query); 

} 

function fail($message) { 

die(j son_encode(array('status' => 'fail', 'message' => $message))); 

} 

function success($message) { 

die(j son_encode(array('status' => 'success', 'message' => $message))); 

_ _Q - 

service.php 
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long exercise solution 



§OLyttpH 


Your my_scripts.js file now has a new function, called getDBRacers, which calls the 
service.php file. There is no need for the old getXMLRunners function anymore, so you 
can get rid of that. The new function accepts JSON returned from the service.php file 
and alerts out the number of runners that was returned. The startAJAXCalls timer 
function has also been updated to call the new function. The service.php file has been 
updated to send back the runners retrieved from the database, JSON-encoded and 
ordered by finish time, starting with the lowest first. 


Use the jctJSON 
j6^ucv-y method "to da 11 
the scv-vidc fhp -Pile- ' 


function startAJAXcalls() 
if(repeat){ 


setTimeout( function() { 

.^ no - Call oh a 

SetPBRadersO; s ^ c aulcd kas.s. 


startAJAXcalls(); 

}, 

FREQ 


The data \rc-tuv-hcd -fv-o» 

the <\eiJSON dal I 


function getDBRacers(){ 
^ $ . get JSON 

alert (j 

})； 

getTimeAjax(); 



son.runners 


,function ( jsoh ) { 

.IchgiK) ； Likc a^ays, 
this also has a 

length piropev-ty. 


T^C 产 object ton-barns 

av-v-ay ailed v-uwev-s. |*t 

opi -tK'is i\\t 

jsem 一 eMode mc*tKod m PttP. 
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<?php __ The database <\ucv-y b> 

jet 七 he \rujrme\rs 

$query = "SELECT first—name, last—name, gender, finish 一 time FROM runners 
order by finish_time ASC "; 

$result —— db dOhhCd*tior\ ($query); 


$runners = array(); 


Cv-catc a hc>/ av-vay -to 
hold ou\r \rrtuv^cd values. 


Loop 

v-csiAltsct, 

associative arrays batk. 


while ($row = mysql—fetch 一 array($result, MYSQL—ASSOC)) { 

3\r\r3y__puslv ($runners, array ( ' fname ' => $row [ ' f irst_name ' ] ，- ' lname '=> 

$row['last name '], ' gender' => $row[’gender’], 'time' => $row['finish time’])) 


echo jsoh __ttitoAt (array ("runners "=> 
exit; 


> fruhhC\rs) ) ； p u ^ \rcW^cd 

“ data • ， 山 0 吖 OYm 

i!" t^Tr asSoC l ah ^ ^ ih assodiatwc 
七 he jQOhl TO\rrw 3 "t 3 hd wv*i 七 e i 七 

■to whatever ^Hed ii. 


function db—connection($query) { 

mysql—connect('127.0.0.1' f 'runner_db_user' , 'runner_db_password *) 

OR die(fail('Could not connect to database .'))； 
mysql_select_db ( 以一 ^〜' h -to handle -the 

dd'tdbdse 灼 idd'ticm 



return mysql 一 query($query); 

fi^hdlcv- -Puh^tiohS -fco deal wi-th 

C\r\ro\rs o\r su^csscs ih ouv- s^v-ipts 

unction fail($message) { 

die(json_encode(array('status 

function success($message) { 

die (j son encode(array('status 


Rc*tuv*y\ *tV^c v*csul*tsc*t *to 

tailed tWis {: \o^ 


> 'fail', 'message' => $message))) 


> 'success', 'message' => $message))) 


?> 



service.php 
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test drive 


Dwi/e 


Update your service.php and my—scripts.js file with the code you just created, and open 
index.html in your browser. Open the “Network” tab in the Developer tools, and you’ll 
see the JSON information getting loaded in. 



TiiC -fur\d*tior\ alcvts 
ou*t He r\ur«bcv" o-f 
vetovds vetumed m 

i\\t JSON object. 


service.php 

/chapter09/step3 

time.php 

/chapter09/step3 

service.php 

/chapter09/step3 

time.php 

/chapter09/step3 

service.php 

/chapter09/step3 

time.php 

/chapter09/step3 

service.php 

/chapter09/step3 

time.php 

/chapter09/step3 


10 requests I 4.80KB transferr 


{fname : Dacob, lname:Walker, gender:m. 


► 8 


{fname : Dohn, lname:Smith, gender:m, time: 

{fname: ]acob, lname: Walker, gender jm, time 
{fname:Mary, lname : Brown^ gendertime : 26:01} 
{fname : Denny, lname : Pierce, gendertime : 26:04} 
{fname:Frank, lname : Dones, gender:m, time : 26:08} 
{fname : Bob, lname : Hope, gender:m, time : 26:38} 
{fname : Dane, lname:Smith, gendenf, time:28:04} 
{fname : Ryan, lname:Rice, gendertime:28:24} 
{fname : Dustin, lname:Jones, gender:m, time:29:14} 


|r> the w /Vc-t>wo\rk w section 
o( -the b\roy/sc\r "tools, 

"the J£0hl 'm-Po\rrif»a-tio^ is 
visible m 七 he JSOM tab. 


iP >z 


0 0 Documents Stylesheets 




Not quite. 

We know that we have the data in JSON format, 
since it was our own PHP code that created it. 

Now we’ll (finally) take a closer look at that JSON 
object we kept telling you we’d get to, so we can get 
the data back out. 
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Access data in the JSON object 

The j son—encode function in PHP allows us to convert an associative array into 
aJSON-encoded string of values. These values can then be accessed in JavaScript 
as associative arrays too, so we can loop through them and interact with them in the 
same way we interact with other arrays. 


When we were using XML, we had to scan through the data to find the next runner. 
Then, once we found a runner, we again had to find if the runner was male or 
female. Remember that JSON object that gets returned from j son—encode? With 
the JSON object, we can directly access its properties, using the dot (.) notation. It 
contains a single array, called runners, as a property. And, once we have the array, 
we can use the key of the associative array to know if the runner is male or female — 
which is much more efficient than looking for it each time. 


Sharpen your pencil 

Update your 


getDBRunners function to read the JSON object from service.php. Then, use 


conditional logic to decide which list the runner goes in. But watch out! Only do that if there 
are actually runners returned in the JSON object. 


function getDBRacers(){ 

$.getJSON( , function (j son) { 

if (j son.runners. > 0) { 

$('#finishers_m').empty(); 

$ ( '#finishers_f') .empty(); 

$ ( '#finishers_all') .empty(); 

$. (json•runners,function () { 

var info = '<li>Name : * + this['fname'] 

this[ ] + '</li>'; 

if(this[* gender'] == 'm') { 

$(▼ '). append( info ); 

}else if (this['gender'] == 'f') { 

$('#finishers—f')•append( ); 

}else{} 

$ (’ ') .append( info ); 

})； 

} 

})； 

getTimeAjax(); 


this['lname'] + '. Time : 



my—scripts.js 
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sharpen solution 



Using conditional logic and the information returned in the JSON object, 
you can determine which list the runner should go in. Like before, the 
runners should also always be added to the all—finishers list. 


今 C 七 "the m-Po\rr»»a-tioir» -Pvona 

function getDBRacers(){ / 七 k 

.getJSON ('WvidC. ,function(json) { 

, 丄 L ^ - - ^ Chc^k i-P there is data m 

if (i son . runners . kh<\*th> 0) { > t … 

」 ] tnc v-u^^cv-s av-v-ay. 

$('#finishers_m').empty(); | 

$ ( ▼ #f inishers—f ， ） . empty () ; V ^ - ， out the lists ajam- 

$ ( '#finishers all') .empty(); 



• ( json.runners , function() 


this 


var info = '<li>Name : ' + this['fname' 

+ '</li >，； 


if(this['gender'] 


， m，）{ 


$ ( ， 秦 f mishers— ' ） •append( info : 
}else if (this['gender'] == 'f 1 ) { 

$ ( ' #f inishers 一 f ' ) . append (ir\-fo ) ； 
}else{} 

$ (' -f mishcV"S d\\' ) . append ( info ); 



''+ this['lname' 

Octk J ^ 
oWtt f o? 吖切 ^ 


'.Time : ' 


})； 

} 

})； 

getTimeAjax (); 



Add "the \rurme\r "to the 
dll list 



my—scripts.js 



Gce| Bits 


We can use each method to loop through all the elements in the array returned 
in the JSON object.This method is slightly different from the (selector) . each 
method, since it can iterate over non-jQuery arrays, like our runners array. 
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Tqst DriVq - 

Update the getDBRacers function in your my_scripts.js file. Then open up index.html and 
see your runners get loaded from a MySQL database, using Ajax, JSON, and PHP. 


丨回 


Q 2011 Race Finishers 


C O thinkjquery.com/chapter09/step4 / 


☆ 



I Start Page Updates I Stop Page Updates 


Page refreshes every 10 second(s). 

Last Updated; 

My 31,2011, 10:06:05 am 





0 


Look, ifs great that we can get data 
this way, but we really need this working 
with the form we created for the 
marketing department, right? 


Good point. 

Once we get that part finished, aloha Waikiki! Let’s make 
sure the data Marketing is putting in doesn’t get us into any 
trouble first. 
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nobody likes dirty data 


Pata sanitization and validation m PHP 


With the increase of spam bots and hackers trying to get ownership of your dataset for 
nefarious purposes, you should never trust the data that is entered into a web form. It’s 
always a good idea to validate and sanitize any data sent to your server before you insert it into 
your database. This ensures that you got the type of data you expected for a particular field 
(validation) and that the data you received doesn’t contain anything that could be potentially 
dangerous to your server or database (sanitization). This can help protect you against issues 
like SQL injections, drive-by cross-site scripting issues, and lots of other nasty things you can 
find out more about online. For our application, we’ll use some nifty PHP methods to clean up 
our data and make sure the correct data is used. 

Co^vcr-b so^c special HTML Celtics m 

<?php a ^ sa-fc -fov- data asc 

htmlspecialchars($_POST["a"]) ; // Encode the strings into safer web and database values 


empty($ POST["b"]) ; // The "empty" method checks if the value is empty 

Preg m a ； c h (^ $ va r) ; // ThlS 1S a ” Reguk Expression”. It checks $V ar against a set pattern 


?> 


CKctk a stv— 

is ov- y\o*t- 



m 

so 


usm5 vc^ulav c%pvcssio^s be vevy 
you da 於 vcally dor\*tvol tiic -type data ⑼七 eved. 


There are many other functions you could also look at for data sanitization; these include 
htmlentities, trim, stripslashes, mysql_real_escape_string, and many 
more. You can find a bunch more of these in Chapter 6 of Head First PHP & MySQL. 


Use the same PHP file for multiple purposes 

We’ve looked at the two ways of sending data to the server to be processed by PHP: 

POST and GET In combination with some conditional logic, we can detect if there was 
a POST or a GET request to our PHP file and act accordingly. Remember that hidden 
field we added to our form a few pages ago? 

<input type= M hidden" name="action" value= M addRunner" id="action"> 


We can watch for this value in the POST, and know that we posted a form. Then, we 
can run some data validation and sanitization functions to make sure we got all the data 
we want. Similarly, if we update the get JSON call to get the runners from the database 
with a URL parameter (for the $_GET PHP object), we can target just that code in the 
PHP file to run. That way, we’ll only have one PHP file to maintain. 




.getJSON("service. php?action=getRunners" , function(json) 


Use tKis -to -tell -tKc PHP *to 

i\\t todt associated With 
vuirmev*s -fvom d3*tabasc- 


Ack! Every ones clearing their desks 
and heading to the airport! So, we know how 
to complete the form now, right? 
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keapy BaK^ 


Update your service. php file with the following code. It will handle 
both the GET and POST of information. You’ll also need to include 
the db connection, success, and fail functions from before. 


<?php 

if ($_POST['action'] == 'addRunner') { 

$fname = htmlspecialchars($_POST['txtFirstName']) 
$lname = htmlspecialchars($_POST['txtLastName '])； 
$gender = htmlspecialchars($_POST['ddlGender '])； 
$minutes = htmlspecialchars($_POST['txtMinutes']) 
$seconds = htmlspecialchars($ POST['txtSeconds']) 


CKctk i-f *tKcv-c >was a value of 

addRu^c^ POSTcd tKc 

TK»s »s ouv W.ddch (\t\A ca^rlic^r. 

Data sahi-tiz^-tioh o-f the 
ih+oirmatioh ih the IMPOST a\rv-ay 


if(preg_match(' / [ A \w\s] /i 1 , $fname) 
fail('Invalid name provided .')； 


preg match(' / [ A \w\s ]/± } , $lname)) { 



if( empty($fname) 


empty($lname) ) { 



validation c^suv-cs 

some 七 ws c^*tcv-cd- 


if( empty($gender) ) { 

fail (• Please select a gender • 丨 ）； ^_ Call the ^il 

} the validatioh -Pails. 

$time = $minutes. M : M .$seconds; 

$query = ’’INSERT INTO runners SET first 一 name= ' $fname 1 , last_name= ' $lname ', 
gender I $gend er 、 finish time= ， Tc U 七 ^ database *to msert 3 从 W ^ord... 


$result = db_connection($query); 
if ($result) { 

$msg = "Runner : M .$fname. M M .$lname. M added successfully"; 
success($msg); 

} else { fail ('Insert failed.');} exit; i-p -the gctRuhhCVs value 

} elseif ($_GET [ ' action ' ] == ' getRunners ' ) SCh*t ih "the U/^L. 

$query = M SELECT first 一 name, last—name, gender, finish 一 time FROM runners order by 
finish time ASC '; 


...and i-f i-t was suddess-ful ov- ⑽七 . 


$result = db_connection($query); 

$runners = array(); 

while ($row = mysql 一 fetch array($result, MYSQL—ASSOC)) { 

array—push($runners, array('fname' => $row [ 1 first 一 name'], 'lname' => $row['last—name'], 

'gender' => $row['gender '], ' time' => $row['finish time'])); 



echo json encode(array("runners" => $runners)); 
exit; 


^ci a 灼 d \rc"tu\rr\ 

七 he v-uh^cv-s. 


— ' 



service.php 
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hawaii, here you come... 


function getDBRacers(){ 

$.getJSON("service.php?action=getRunners ", function(j son) { 
if (j son.runners.length > 0) { 

$('#finishers_m 1 ).empty(); 


})； 

getTimeAjax() 



DRive 


my—scripts.js 





Update the get JSON 
call to include a URL 
parameter called 
action with a value of 
getRunners to tell the 
service.php file to return 
the runners. 


After updating your service.php and my—scripts.js files, open up index.html in your browser. 
You should see runners getting loaded in. You should also be able to add new runners to 
the list using the form on the new tab you created. 


^ 门 I 冋 IByg 

Q 2011 Race Finishers 

♦ C © thinkjquery.com/chapter09/end/ ☆ ^ 


2011 Race Finishers! 



Awesome! Lefs get on 
that plane and have a few 
more of these on the 
beach... 


O 



Congratulations to all our finishers! 
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jQ^uerycross 

It’s time to sit back and give your left brain 
something to do. It’s your standard crossword; all of 
the solution words are from this chapter. 



Across 

2._Management Systems (RDBMS) 

are extremely organized applications designed to store, 
organize, and remember relationships between your various 
pieces of data. 

5. AjQuery shortcut method that’s dedicated to 
sending data to the server. The method takes several 
parameters: URL, the information you want to send, 
and a handler function that will run after the data 

is sent. 

6. Server-side scripting language often used to send data 
collected in a form to the server. 

10. JSON = Java Script_. 

12. Popular, open source database server that you can 
download for free. 

14. The jQuery shortcut for getting JSON information from a 
server. 

15. Another jQuery form helper method that will create an 
associative array of key/value pairs (which happens to make for 
great structured stoarge). 

16. SQL =_Language. 


Down 

1 .A special type of array that holds its information in name/ 
value pairs. 

3. JSON and XML are two types of data-_formats 

that jQuery and PHP can pass back and forth to each other. 

4. One of two methods used to send data to the server from an 
HTML form. This one will append the form field names and their 
values onto the end of the URL. 

7. One of two methods used to send data to the server from an 
HTML form. This one also sends data, but doesn’t make that date 
visible in the URL string. 

8. The jQuery form helper method that will join all the inputs of 
your form into a single string of key/value pairs, separated by 
ampersands (&). 

9. HTML element to use when you want to collect data on a web 
page and send it to a server for processing. 

11. The SQL command used to put data into a table. 

13. The SQL command to retrieve data from a database table. 
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jquerycross solution 



jQ,uerycross Solution 
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Your jQuery/Ajax/PHP/MySQL Toolbox 


You've got Chapter 9 under your 
belt, and now you’ve added 
some basic PHP, MySQL, JSON, 
and more Ajax to your toolbox. 




, Aat a - Aa^ ascs \ 
级 U c 

t 一 

队 . 


Y 


O^ON r 山， # 

lAst 二 tV> “ 一 ' \ 

丁 w 、 s 々： w a 


^° y 

scr \aV 似 A ㈣ 


PUP 

L ， 


' S dcli ^cd ^ ih 

卿， i e 

i ^ ^ , ot 

^.^youi i, sks ^ 


w ^*> 咖 ° hd 

、 <? P^ ?> 1 

y°^p^ p s ^ d php Code 

c^ho 

⑽。如 l ，, ; ^ is： 

Lpost 

〜 s ‘ 

J So ^Cindodc 
几 , s ,, 

Uy j6^， 。ded 叫 
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^ 个 

extreme form makeover + 










I like your form. 
How about we go back 
to my place for some 
interface time? 


The Web lives and dies by users and their data. 

Collecting data from users is a big business and can be a time- 
consuming challenge for a web developer. You’ve seen how jQuery can 
help make Ajax, PHP, and MySQL web apps work more effectively. Now 
let’s look at how jQuery can help us build the user interface for the forms 
that collect data from users. Along the way, you’ll get a healthy dose of 
jQuery Ul, the official user interface library for jQuery. 
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bigfoot might need more than a haircut 


Cryptozoologists.org needs a makeover 

Dr. Pattersby and Dr. Gimli are dedicated to collecting as much cryptid sighting data as 
possible from users around the world. Their website, cryptozoologists.org, is revered by 
professional and amateur cryptozoologists worldwide. The good doctors have another 
gig for you: update their very outdated Cryptid Sightings form. 


0 


O 





Cryptids are creatures 
unknown or unrecognized by the 
scientific community. Collecting 
good data from users is crucial for 
our research. 


Some famous 
cryptids include Bigfoot, 
chupacabras, and the Loch 
Ness Monster. We need a 
better form to capture when 
and where people see them. 






The dv-yp*toz^olo^'is*ts *to say ^ood 

*to 


i\\6r old, dlur>ky HTML -fov-m. 


I wish I could 
get the paparazzi 
off my back! 






^ look W W f W 

TT^ev-es hothihg visual 
Assists -the usev ih Chtcv-ihA 

㈣ 兮 daia, a^d HTML 

卜 〆 t 9 lot o( optiohs 
^ ^ As a vesuli the 
dodUs get a loi j Uhk daia 
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jquery Ul 


Pimp your HTML form 


Below is a mockup of what our cryptozoologists want the new form to look like, along 
with a few extra notes. 


£ubmi*t Your Cv"yp*tid 

CRYPTIV DATA 

Date of 



, I jp oyrw \S a Wd ， 

tV>c » . "if slov>?v data- Wc 

^ ^ us a lot talcy>da , so 

t V,at tV>e data as a^aie as 


Cv-catuvc Type: 


Alarwrwal 


Wlc use vddio buttons -fov* *this oy>c ov\ duvV"C^*t 
-povm ； dav> v/C mdke 七 hem look move *mv*i*t*m^? 


Dis*tair\dc -fvom Cv-ca*tuvc (estimate m 
Cv-catuvc lA/ci# 七 ： I 
Cveatuve Height ： 

Colov o-f Cvea 七 u\rc ttidc/Fuv/Covcv'mg ： 





\^lt A V»kc OVAV usevs 
-to c\\cy ^ ^ 

t^itr tv>c ^mental 
u data ^\clds. Mov-c 

ftow about a dolo\r 3^£.uvatc <ov vaS- 

州 ixe\r hc\rc? ^as»cv ^ov ouv usevs. 


邮 rtT_ LOCATION VhTh 

Latitude o-f Location：[ 

Longitude o-f Location：[ 




Eirtcv youv si^Ktmg da 七 a: 


Car\ you make -tV^c Wtto 外 look n’u^? TV 

pill - shafed Wtton oy\ ouv tuvv"CJr\*t <o\rm 
makes *»*t look like weVe way ou*t date. 



The crytozoologists have asked for a tall order here. They want you 
to build a user interface like you would find in a desktop application. 
What do you think jQuery offers that can accomplish this? 
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cubicle conversation 


f*vav>k 



Did you guys check out the sketchup of 
the ''Submit Your Cryptid Sighting" form? 


Frank: I saw it. The current form is an HTML form, but HTML and 
CSS aren’t going to cut it for the new form the cryptozoologists want. 

Jim: Tell me about it. Have you ever tried to style form elements with 
CSS? I’d rather have a root canal. 

Frank: Yeah, and jQuery.. .well, I haven’t seen anything in jQuery 
that will help us build interface components like that. 

Joe: We’ve got to figure this out, guys. Folks are used to fancy 
components like this, so we’re going to have to find a way to build them. 

Frank: We’ll probably need a combination of JavaScript, j Query, and 
CSS to pull this one off. 

Jim: That’s a lot of logic to write. Just the calendar pop up they want 
will be lines and lines of code and a bunch of complex CSS. 

Joe: Hmmm. There may be a j Query plug-in for this kind of stuff, 
actually. 

Jim: A plug-in, right! We used one a couple chapters back to create tabs 
for the Bit to Byte race results page. So there’s more to plug-ins, huh? 

Joe: Yeah, if j Query doesn’t offer something a developer needs, that 
developer can build a plug-in and release it to the j Query community 
for it to use. This saves other developers tons of hours. 

Jim: So some developer or dev team out there may have already dealt 
with this? 

Frank: That would really save us some headaches. 

Joe: Let’s go poke around out atjQuery.com and see what we can find. 
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jquery Ul 





WouldtVt it be dreamy if 
there were some sort of library of 
jQuery interface plug-ins? 

But I know it’s just a fantasy... 
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introducing jquery Ul 


Save coding headaches (and time) with jClucry Ul 

Fortunately for developers everywhere, jQuery has an official library of user interface 
plug-ins for just this kind of project. That library is called j Query Ul, and it offers 
three main types of plug-ins for the j Query core: effects, interactions, and widgets. 


Effects plug - iws 

j Query Ul extends j Query by 
adding more effects. Make 
your elements bounce, explode, 
pulsate, or shake, j Query UIs 
also includes easing functions, 
complex mathematical 
operations that make 
animations look more realistic. 


Interaction plug - ins 

Interactions add more complex 
behavior to web apps. You 
can enable users to interact 
with elements by making those 
elements draggable, droppable, or 
sortable, just to name a few of the 
options. 


Widget plug - ins 

A web widget is a self-contained 
component that adds functionality 
to your web app. Widgets save 
you tons of coding time and 
complexity while creating usable 
and responsive user interface ' 
elements. I 

^ ^ 9°'^9 io -Po(ius mostly 

oh widgets 4 ^ ou^ Ul wo^k 

,h this chapter. 


脅 T D 諫 


jQuery oilers a plug - in arcliitecture tkat 
allows wet developers to extend (or aetd 

onto) tke core jQuery litrary. 


Try out some j Query Ul effects, interactions, and widgets by visiting the 
following URLs and doing what the instructions say. 


URL 

Instructions 

h ttp://jqueryui. com/dem os/anima te/# default 

Click the Toggle Effect button. 

h ttp://jqueryui. com/demos/effect/default.html 

Choose an effect from the drop-down list. Then click 

Run Effect. 

h ttp://jqueryui. com/demos/draggable/#default 

Click and hold on the box that says "Drag me around.” 
Then, drag your mouse to drag the box within the 
screen area provided. 

h ttp://jqueryui. com/demos/accordion/#default 

Click on the different sections to see the accordion 
expand and contract. 

h ttp://jqueryui. com/demos/dialog/#animated 

Click the Open Dialog button to see a custom 
jQuery Ul dialog box. A lot better than a boring, old 
JavaScript alert box, no? 
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♦ 




伞 








Match each jQuery UI plug-in to what type of plug-in it is and 
what it does. Hint: If you’re not sure, spend some more time poking 
around the demo site from the Test Drive on the facing page. 




Interaction: Makes a DOM element a 
target for draggable elements. 


Aut^coniplete 


Widget: Displays the current percentage 
of completion for some event. 


DrPppaUe 


Effect: Makes an element appear to 
expand and dissipate into transparency, 
like smoke. 


Explode 


Widget: Provides a list of possible values 
when a user types into an input field. 


portable 


Effect: Makes an element appear to slide 
up or down like a window treatment. 


frogressksir 


Widget: Creates stacked and collapsible 
areas to organize web content. 


f^eslzaUe 


Effect: Makes an element appear to 
break into pieces and spread out in 
several directions. 


Blind 


Interaction: Makes an element 
sortable by dragging. 


Accordion 


Interaction: Gives an element 
draggable handles that allow a user 
to scale it. 
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who does what solution 


♦ + 論 4 - 

- O 办瞽冬 - 

嚷备▼冰 M 

Match each j Query UI plug-in to what type of plug-in it is and 
what it does. 



Interaction: Makes a DOM element a 
target for draggable elements. 


Widget: Displays the current percentage 
of completion for some event. 

Effect: Makes an element appear to 
expand and dissipate into transparency, 
like smoke. 


Widget: Provides a list of possible values 
when a user types into an input field. 

Effect: Makes an element appear to slide 
up or down like a window treatment. 


Widget: Creates stacked and collapsible 
areas to organize web content. 


Effect: Makes an element appear to 
break into pieces and spread out in 
several directions. 

Interaction: Makes an element 
sortable by dragging. 

Interaction: Gives an element 
draggable handles that allow a user 
to scale it. 
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jquery ill 


ore we can do anything with jQuery UI, we need to configure the components 
want, choose a theme, and download a copy of it. Follow the steps below: 


o Point your browser to the jQuery UI download page : 

http://jqueryui.com/download 



Choose the components you want to download. 



UI Core 

0 Co re 

A required dependency, 
contains basfc functions and 
Inlttalfeers. 

逆 Wfdget 

兒 Mouse 


& Position 


Widgets 

Full-featured UI Controls - 
eac h has. a range off options 
and is fully themeabLe. 

Wlc’ll or>ly U| tcfct 

-fov 七 iVis pvojcdt so 
select or^ly ov>cs siioym 



Choose a theme for your download 


Theme 


Select the theme you want to 
incLucfe or design a custom thenw 

j Sunny t 



? oosc ^ Surmy 

+饮 y 财 dovmload. 


0 Accordion 
0 Autoccmplete 
M Button 
M DlaEog 


M Slider 


M Tabs 
M Date picker 
0 Progressbar 


One of the best things about jQuery UI are its themes. 
The dev team for jQuery UI included all of the CSS for 
making a nice-looking interface. You can even create your 
own theme with jQuery urs ''theme roller/ 1 For a gallery 
of all the jQuery UI themes, visit the following URL: 

http://jqueryui.eom/themeroller/#themeGallery 



Press the Download button. 


Download 



You just need to unzip the folder and 
include the library in a project folder. 

Turn the page, and we’ll have a look inside j Query UI. 
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jquery ill structure 


Whafs inside the jClucry U1 package 

After downloading and unzipping jQuery, you’ll find that it’s structured like this: 



jquery-ui-1.8.16.custom 




TiiC you diiosc is 

ur>dcv- dss -foldcv-. 



images 




] 


css development-bundle index.html 



js 

I 


P 

sunny 

I 


I I 

3 0 

jquery-1.6.2.min.js jquery-ui-1.8.16.custom.min.js 


n 

3 


suv-c 


TV Wl ^olks wake 

七 ha 七 y ova a ^°?7 

i\>t #叫 La”. 


jquery-ui-1.8.16.custom.css 

/ 

[r hcad sedioh o( tk si 3 hti ， .ht 你 I 

W, wc heed b> lihk h> this -Pile so that the 
j^uciry U| widgets look \riglit. 


sed-tioh ih -the sigh-tihgs. 
IvUI -foirm that lihks 

"to "this. 


We’ve included the j Query UI folder in the code folder you downloaded at the 
beginning of the book. You’ll find it in the end folder inside the chlO folder. 


Our project checklist 


j Query UI does a lot for you, but we’ve still got quite a few items to tackle in order to 
build the new form. Here’s a checklist of what we need to do: 


□ 

□ 

□ 

□ 

□ 


I. Build a da*tcpidkc\r -for users to errter da*tc -the 

Z. Build more radio buttons -for users *bo dhoosc d\rca*tuvc -type. 

孓 . Build number — Ch*bry sliders -for users *to cr\*tcr disiahde -from dreature, drca*turc 

wci^h*t) 心 feature hei^lvt) latitude, dr\d loh^i-tudc. 

Build d dolor mi^cr *m*tcv--fadc dompoherrt -for *thc user *bo cr\*tcv d\rca*tu\rc dolor. 
5. Build d hidcr—lookmj submi*t bu*t*bo^ -for si^lvtm^s -form. 
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jquery ill 


Puild a date picker into the sightings form 

It’s amazing how easy it is to put a jQuery UI widget into an HTML form. 

Let’s start with the calendar datepicker: 

Create a link to the jQuery UI CSS file ： 

<link type= M text/css" href= n jquery-ui- 1 . 8 . 16 .custom/css/sunny/ 
jquery-ui- 1 . 8 . 16 .custom.css" rel="stylesheet" / > 

❺ Create a <script> tag that points to jQuery UI. 

<script src="j query-ui- 1 . 8 . 16 .custom/j s/jquery-ui- 1 . 8 . 16 . 
custom.min.j s"></script 〉 

o Take a plain old HTML input field. 

<input type="text" name="sighting date"> 



o Add an ID of datepicker to the <input> tag. 

〈input type= n text" name= n sighting_date n id= n datepicker "〉 

o Create a JavaScript file and put the following code between the 
curly braces of the $ (document) .ready (function() {}. 

$('#datepicker').datepicker(); 

o Open the file in your favorite browser and click into the input field. 

CRYPTID SIGHTING DATA 


That's \i! 

added 


Dace of Sighting: 


匚 

>g 

t I 2011 


] 

Su 

Mo 

Tu 

We 

lh 

Fr 

Sa 


1 

2 

3 

4 

5 

6 

7 

S 

9 

10 

11 

12 

13 

14 

15 

IS 

17 

IS 

19 

20 

21 

22 

23 

24 

25 


27 

2B 

29 

30 

31 
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work smarter, not harder 


jQuery Ul behind the scenes 

It may seem a bit like magic, but j Query UI is really just a lot of well- 
designed and well-written j Query code — code that j ⑽ didn’t have to 
write. Let’s take a closer look at how it works. 

Just like all the other jQuery code you've written, the 
datepicker uses a selector and a method. 



("#datepicker n ).datepicker() 


jQuery code 


Xy 7 Behind 

the Scenes 

o Using the jQuery and jQuery UI 
library, the JavaScript interpreter 
asks the DOM for the element 
whose ID is datepicker. 



meal powcir is hcv-c, i h 

ihc method. 



❺ 


The DOM grabs the selected 
element, runs the datepicker 
method on that element, and 
returns it to the interpreter. 


DOM version 
of the page 



JavaScript 

interpreter 


The datepicker method instructs the JS interpreter 
to build the datepicker on the fly along with a load of 
HTML, CSS, and built-in interactivity. 


\rs 


"The widget 

仏 3 七 wgi 匕 ally 

-^pa 9 eisa1ble 

吡 sted ihsidc multiple 
divs. 



IYs cool that all that stuff happens and 
I only have to write a little bit of HTML and 
jQuery. But does that mean Tm stuck with 
how the calendar looks and functions? What if 
I want to do something different? 
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Don’t worry, you’ve 
got options. 

Let’s check them out. 



































jquery Ul 


Widgets have customizable options 

If you dig into the datepicker widget, you’ll find that it’s got a lot of 
rich features and options you can configure. 


TV>e 、代 v 、 ovaS ” 

-takes Y OVA 

previous 



丁 he 匕 WrirCh 七 ds^c 

will be hijhlightcd 

ih a di-p-fcirch-t dolour. 


Su 

Mo 

Ty 

We 

Ih 

Fr 

Sa 


1 

2 

3 

4 

5 

€ 

7 


9 

10 

11 

12 

13 

域 

© 

3 10 

17 

IS 

19 

20 

21 

22 

23 

24 

25 

2 石 

27 

23 

29 

30 

31 



The “ 吡 W butioh lakes 

y° u ^ hext mohtk 
you dek, a 
■wblc \oy that mohth is 

9^c^tcd oh the -Ply. 


Customize the datepicker with options 

Because j Query UI is built on j Query, you don’t have to write much code 
to customize the datepicker widget to fit your needs. At the time of this 
writing, the datepicker has 46 different options you can set. 


The datepi^kev- widyt domes 
y/rth *to^s o-f dojrvfi^AV^abk | ) 
options. The S*tcfMoir>*ths 
option lets you how 

n\3v\y mo^-ths you *to hof 


( n #datepicker n ) .datepicker ({ 

StepMonths ： 3 ^ —— ^ ，如 t 伽 August, whe, you P ，ess 

u p\rcvious w o\r bu 七 youll 

hop thvee rwohths badkwav*d oy £^ee 
rwohths -Poiry/avd. 

( n #datepicker n ) .datepicker ({ 
changeMonth : true 


}) 




YOU sc-t -tKc 加払 o ? 七咖 

-to *tvuc> *tKc usev tV^oosc *t^c 
a dhro? - dow l»st 



Write the code that will let the user change both the month and the year of the 
datepicker widget using a drop-down. Hint: Put a comma between the options 
when you’re setting more than one. 
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exercise solution 


Qpi 


PLjiiipH 


Write the code that will let the user change both the month and the year of the 
datepicker widget using a drop-down. Hint: Put a comma between the options 
when you’re setting more than one. 

-true, true 

'}); . 


)g> ds Q (§\ 


R 卿 BaK^ 

Ope 


Find the file called sightings—begin.html’m the begin folder under chlO. Save it 
as sightings—end.html into the end folder for Chapter 10. Add the bolded code 
below to your sightings —end.html and my—scripts.js files. 


Ncav *tof si 吵 Ale 


<head> 

<title>Submit Your Cryptid Sighting</title> 

<link rel="stylesheet" type="text/css" href="style/form.css" / > 

<link type:，▼ text/css'▼ href= M jquery-ui-1.8.16. custom/css / sunny / jquery-ui - 1.8.16. 
custom.css" rel="stylesheet" /> 

</head> x > css ^ s 。 如 V 却 Is 


Y\ttd bo Imk *to j^uc\ry U| 

c*ts look V" • 吵七 . 


<h3>Date of Sighting : </h3> 

<input type= n text" name= M sighting date M id= M datepicker M /> 



<script src= M scripts/jquery-1.6.2.min.j s"></script> 

<script src= M scripts/my_scripts.js"></script> 

<script src= M jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js M X/ 


script> 


</body> 


</html> 


I/Ve v\ttd bo mtludc U| litv-av-y b> _ 

make all tool U| -fcaWcs available. 


Ncav- bottom 七 he 


$(document).ready(function(){ 




$('#datepicker').datepicker({ changeMonth : true , changeYear : true}); 


})',//end doc ready 


TV^c da*tcpidkcv Code 



my—scripts.js 
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Tesr Drii/q 


After entering the code from the previous page, open sightings—end.html’m your favorite 
browser to test the datepicker widget. Click the “next” and “previous” buttons and 
the month and year drop-down lists to make sure everything works. 

The datepicker works! 



TKc da-bcfitkcv- v /却 七 

does you …扣七 i 七 


00O 


](T)(T)7V 


Submit Your Cryptid Sighting 

Fill out the form below and click "Enter" to Submit 


CRYPTID SIGHTING DATA 


Date of Sighting: 


id 

- Aug 

t I 2011 : 

L 


su 

Mo Tu 

We 

Th 

Fr 

Sa 

L 

1 1 厂 2 ]「 

3ir 


5 

r ®] 

HI 

a|| 9|| 

10| 

u ii 

12 

i 3 j 

Ml 


17| 

ia| 

19 

2()j 

Mr 

22][ 23][ 

24 

25[ 

26 

L 27 ! 

15 28 」l 

29][ 30][ 

31 





the 

ahd oyho^s 

woirkihg, -too. 


CRYPTID LOCATION DATA 


Latitude of Sighting: 
Longitude of Sighting: 


Check it off 


Checklist item 1 is done. Let’s move on to checklist item 2. 

I. Build a da*tcpidkcr -for users *bo errter *the da*tc o^c *the si^lvtm^. 

I I Z. Build more radio buttons -for users *bo dhoosc d\rca*tuvc -type. 

I I 冬 . Build humber-Ch*try sliders -for users *to c^-tcv- disiahde -from dv-ea*ture, d\rca*tu\re 

心 feature hci^lvt) latitude, dr\d loy^rtude. 

I I 十 . Build d dolor mix.c\r dompohCh 七 -for *thc user to cr\*tcv drca*tu\rc dolor. 

I I 5. Build 3 hider—look'm^ submit bu*t*bo^ -for si^lvtm^s -form. 
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a button worth clicking 


Styling up your buttons 


What does “more engaging” really mean? It’s mostly a question of style: make a better-looking button, 
and people are going to want to click it. One super-useful widget in the jQuery UI library is the button 
widget. The button widget offers a button method to help you make more appealing form elements 
like submit buttons, radio buttons, and checkboxes. 


*biic HTML -fov d 

s'rn^le Wtto 灼 . 


<input type="radio' 


id= M radiol" 
<label for: 


TKis mput will be undated 
uscV" £-liC-ks. 

name= n radio'，/> button styles 

M radiol M >Choice l</label> ' label *to appear as d button 


f\v\A 七 to\r\rCspoir\dm5 

s*ta 七 emerrt. 

$ ( "#radiol" ) .button (); 


Grouping button widgets 


lookmg, moire mtcWivc but-fcoh. 


For building a grouped set of buttons, j Query UI offers the 
buttonset method, which turns individual button elements into a 
group by referencing the container element for that group. 


po^*b 七 ha 七七 k 

mavkuf Code -Pov* 
bu*bWs needs *to be mside 

HTML -form 


Put youv- v-ad»o 
bu*b*to^ yoiAf msidc 
a toy\*ba'mc\r element 



<div id="radio n > 


<input type="radio" id= M radiol" name="radio n / > 
<label for="radiol">Choice l</label> 
<input type="radio n id= M radio2" name="radio" / > 
<label for="radio2">Choice 2</label> 
<input type="radio n id= M radio3" name="radio n / > 
<label for="radio3 n >Choice 3</label> 


</div> 


卜 youv- \6^ucv-y CoAt, select 
i\\t element ^ 

$( M #radio" ).buttonset 


^ TV butWct mc-tiiod y 呼七 he 
e ; butWs -for you artd runs butW 
method oir\ clcw\Cir\t 
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jQueiy UI Magnets 

Put the code magnets in proper order to create a set of buttons for users to 
select the creature type that they saw. We put a few in for you. 


<div id="type—select ，，〉 


〈input type= n radio M id= M radiol M name= n creature type" /> 


〈label for= n radiol M >Chupacabras</label> 


議 

sightings_end.html 




<input type= f 'radio” 



my—scripts.js 


〈label for= n radio3 n >Loch Ness Monster</label> 

$( n #type_select，，）• buttonset (); 

Clabel for="radio4 n >Sasquatch</label> 


〈label foir— n ira.clio2 n >Jersey Devi 1< / la.be!> 


<input type= n radio" id= M radio4 n name= M creature type n / > 
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jquery ill magnets solution 



jQueiy UI Magnets Solution 

Now you’ve got a nice-looking set of buttons that match the overall theme for 
your form. 


<div id= n type select ，） 


〈input type= n radio M id= M radiol M name= n creature—type” /> 


〈input type= n radio" id 二， , radio2 n name= M creature_type M /> 


〈label for= n radio2 M >Jersey Devil</label> 


〈input typG— n radio M id. = n radio3 11 na.me =n creature 


type 


〈label for= ，， radio3，，>Loch Ness Monster</label> 


J < 二 div>J| 



sightings_end.html 




\y\ Code -foldcv, 
you’ll -f md 
added buttons -fov- 
Yc*ti 0*bV^cv" 

-too. Wlc jus 七 van 
ou*t <Jc spade m 
七 his c%c\rdisc. 



my—scripts.js 
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Tesr Drii/q 


Add the lines of code above to your sightings—end.html and my—scriptsjs file. Then, 
open the page up in your favorite browser to make sure everything’s working. 

Creature Type: 

O Chypacabras O Jersey Devil C Loch Ness Monster (J Sasquatch Yeti Other 



You -took -biicsc flam old 

HTML radio 


0OO 


I ^ ^ 1 

n<i 


r 



!0 


Submit Your Cryptld Sighting 

Fill out the form b«low and click "Enter" to Submit 


•-tubbed thcrh 
… *to a hide-lookiha 
处七 J push bu-tU 



Wow, that was pretty easy. What’s next on our list for the form? 




z. 


□午. 

□ 


Build a da*tcpidkcr -for users *bo errter *the da*tc *the si^lvtmg. 

Build more radio buttons -for users *bo dhoosc drca*turc -type* 

Build humber-Ch*try sliders -for users *to ch*tc\r disiahde -from dv-ea*ture, d\rca*tu\re 
心 feature hei 一 七， latitude, dr\d lor^rtude. 

Build a dolor mi%c\r *m*tcr-fadc dompor\Ch*t -for *the user to cr\*tcv d\rca*tuvc dolor. 

Build a hider—look'm^ submit button -for *the si^lvtm^s -form. 
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constrained data is cleaner 


Control numerical cwtries with a slider 


The plug-in for the jQuery UI slider gives you the power to build a slider 
interface that users can control with their mouse or keyboard. Sliders also 
help you control the numbers that users enter. As you’ve already seen, 
building widgets is a snap once you have the j Query UI library. Building a 
slider widget is just as easy. 


TKis sets uf *bV^C slidev" *m 
youv HTML ^«lc. 

<div id= n slide me M ></div> 



/W heve’s 七 he vela 七 ed 


( ^^ j<$ucv-y Code 

( n #slide me n ). slider() 



丁 k usev* slidev* Kdhdlc 

mouse £.uv*soV" ov 
av~y*oy/ keys oy\ 七 he keyboav-d* 



j\s *tV^c usev- slides tlic slidev V^dle alor\^ 
slidev i\\t sliders value cMa^ts. 


Sliders offer a bunch of customization options too. Let’s say we need the 
user to enter a set of numbers. The lowest value we want users to enter 
is 0; the maximum value is 100. And we want the users to enter values 
in increments of 5. Here’s how we can do that with the slider widget’s 
options: 


$( n #slide me M ).slider({ 


TKc value oftioh -bells i\\t slidev 
y/ha 七 value -to s*tav-b >wi 七 iv 



丁 he step op-tioh- - - step : 5, 

tells "thg slides 

wc 

ihe values 


orientation : 

n; \ 


TV^c mm option tells i\\t slides i\\t 
loy/cs*t value d usev- C^y\ cr\*bcv- 


The rwax optioh tells the slidev- the 
hipest value a usev- C3V ) ⑶ 

vertical' 


The ovich-ta-tioh option 
tdiYi be set "to ho\rizjo>vtal 
ov* wti 匕 al. 
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jquery Ul 



The slider widgefs got 
some great options, but how 
do we get the value from the 
slider into a form input? 

、 ~^ - - - - 

We have to connect the slider with one of the 
slider widget’s event handlers. 

We’ve seen some widget options, but we haven’t yet explored 
another powerful feature of jQuery UI. Many jQuery components 
offer event handlers, and the slider is one of them. At the time of 
this writing, j Query UI’s slider widget offers five event handlers: 
create, start, slide, change, and stop. To connect the 
slider to a form input, let’s try out the slide event handler. 


The HTML for a slider widget 

<input type= n text M id= n my value 


(-(* you dioy\ 

uscv *to be 3klc *to "type 
•to ⑶七 ev* a ” umbev, se 七 
i\\t *to Vcado^lY ^ 



readonly^"readonly" / > 



The jQucry script for a slider widget 


$ ( 


TiVis is 七 he slide cvcr\*b 
liar\dilcv-. T\\t usc\r 
七 vi%e\rs 七 he slide 
cvcr\*b slic w^oves 
七 he slide i^a^dlc- 


n #slide_me n ).slider({ 

slide : function ( event, ui ) { 

$( M #my_value n ).val( ui.value); 



}) 


T\\t slide cvcr\*b is 
a*t*ba^cdi *to a 
^dllba^k. *tV)c 

sc*bs 

七 he mpu*b v/rbii 
j^uev-y val method- 


$( M #my value" ).val( $( M #slide me n ).slider( "value" )); 


i\\t usev slides the slide \\a^A\t, 
七 he is ddllcd 3^d mfu 七 is 

ufda-bed -to i\\c sliders value. 
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long exercise 



Fill in the blanks for the code for each input field the cryptozoologists want. They’ve 
left some notes on the slider options for you to set. 


Pis*t3^dC -fv-om Cvca*tuVC 

SW 七 … 3 value should be 0 . 

/l/lmimum distaste should be 0 . 
/\/|d%imum dista^dC should be *500. 
Use mdV"Cmc^"ts o*f \0 



<h3>Distance from Creature (in ft.) : </h3> 

<input type="text n id="." class="just—display" name="creature 一 distance 


readonly="readonly" / > 



sightings_end.html 


$( n #slide_dist" ).slider({ 



slide: function ( event, ui ) { 

$( "^distance" ) 



my—scripts.js 
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jquery Ul 


Cv"C3*tuv*C lAfei# 七（ … lbs.): 

S-bav-tm^ value should be 0 } 
/\/|'mimum y/ci^*t should be 0. 
Maximum y/ci^t should be 5,000. 
Use *md\rcmc^*U o-f *5 founds. 


C\rea 七 u\re ttcigh-t C\y\ -ft )： 
S*ta\rt'mg value should be 0. 
Mihimurn height should be 0. 
Alaximum height should be 2-0. 
Msc ihd\rcmCh*ts o-f I -foo*t- 



<h3>Creature Weight (in lbs.) : </h3> 

<input type="text" id= M weight" class= n just—display" name="creature_weight" 

readonly^"readonly" / > 


<div id= M "></div> 


<h3>Creature Height (in ft.) : </h3> 

<input type="text" id= M height" class= n just—display” name= n creature—height" 

readonly^"readonly" / > 


<div id= M slide_height"></div> 



sightings_end.html 


$( 



).slider({ 



$( "#s1ide_weight" ) .slider({ 



slide : function( event, ui ) { 

$( " " ) .val ( ui.value); 



my—scripts.js 



$ ( "ifweight" 



).val ( ui.value); 

—0 

my—scripts.js 
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long exercise solution 




Fill in the blanks for the code for each input field the cryptozoologists want. They’ve left 
some notes on the slider options for you to set. 


Pis*t3^dC -fv-om Cvca*tuVC 

SW 七 … 3 value should be 0 . 

/l/lmimum distaste should be 0 . 
/\/|d%imum dista^dC should be *500. 
Use mdV"Cmc^"ts o*f \0 



<h3>Distance from Creature (in 


<input type="text n 


id= M dis*tar\dc 


ft.):</h3> 

"class= n just—display" 


name= ， 'creature—distance 


readonly="readonly" / > 


<div id= "slide dis*t "></div> 



sightings_end.html 


$( n #slide_dist" ).slider({ 

. .yajuc-O,. ... 

step ： 10 , 

slide: function ( event, ui ) { 


$ ( "^distance" .val( ui.value)； ) 



my—scripts.js 
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jquery Ul 


Cv"C3*tuv*C lAfei# 七（ … lbs.): 

S-bav-tm^ value should be 0. 
/\/|'mimum y/ci^*t should be 0. 
Maximum y/ci^t should be 5,000. 
Use *md\rcmc^*U o-f *5 founds. 


C\rea 七 u\re ttcigh-t C\y\ -ft )： 
S*ta\rt'mg value should be 0. 
Mihimurn height should be 0. 
Alaximum height should be 2-0. 
Msc ihd\rcmCh*ts o-f I -foo*t- 



<h3>Creature Weight (in lbs.) : </h3> 

<input type 二 , 'text" id="weight" class="just display' 


<div 


id=" slide 一 weiglvt ，， ></div> 


name= M creature_weight n 
readonly="readonly" / > 


<h3>Creature Height (in ft.) : </h3> 

<input type="text" id="height" class="just 一 display' 

<div id="slide height"></div> 


name= M creature_height n 
readonly="readonly" / > 




sightings_end.html 


$ ( 养 slide 」 iei^vt 


n 


).slider({ 

valued. 


^ —'^^ -- — 

$ ( " # s 1 ide_weight" ) .slider({ 

valued, 


step ： I, 


slide : function( event, ui ) { 



my—scripts.js 


mm:0, 
^%'^000, 
siey ： 10 , 

• slide;. 此 . V! 


$ ( "ifweight" ) . val ( ui. value); 



my—scripts.js 
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test drive 



Tesr Drii/q 


Add the code from the long exercise on the previous pages to your files. 
Then, open sightings_end.html in your favorite browser. Make sure to test the 
sliders using your mouse and keyboard (the left and right arrow keys should 
advance the slider by its increments). 


0 O O 


00 石 


Uscv-s y\o^j 

data by 

i\\t Kd^dles, av\d 
七 he ^v-yftozjoolojis-b 
Kdve bcttcv- 
data quality do^-tvol. 


Submit Your Cryptid Sighting 

Fill out the form below and click "Enter" to Submit 


CRYPTID SIGHTING DATA 


Date of Sighting: 


Creature Type: 


r 

Chupacabras 

Jersey Devil 

Loch Ness Monster 

Sasquatch 

Yeti 

N 

Other 

J 


Distance from Creature (in ft.): 

120 

r . —m ■■■.. - 


Creature Weight (in lbs.): 

1400 


Creature Height (in ft .)： 
8 




XX 


Color of Creature: 


CRYPTID LOCATION DATA 


Latitude of Sighting: 


You’ve got two more number sliders to build: latitude and longitude. 
Then you can check off another item from your project checklist! 
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jquery Ul 



But latitude and longitude have 
negative values and decimal intervals like 
0.00001. Can the slider widget handle 
those kinds of numbers? 


jQuery Ul has you covered there, too. 

The slider widget can deal with negative numbers and decimal 
numbers. You can enter negative numbers as values, as minimums, 
and as maximums. Give that a try below to see it in action. 


Iharpen your pencil 


Fill in the jQuery code to make the sliders for latitude and longitude work. The 
latitude slider should have a range of -90 to 90 with increments of 0.00001. The 
longitude slider should have a range of-180 to 180 with increments of 0.00001. 


value : 0 


slide: function ( event, ui ) { 

$( " " ).val( ui.value) 

} . 


})； 


value : 0 


slide: function( event, ui ) { 

$( " " ).val( ui.value); 


})； 





my—scripts.js 
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sharpen solution 


i^arpen your pencil 


Fill in the jQuery code to make the sliders for latitude and longitude work. The 
latitude slider should have a range of -90 to 90 with increments of 0.00001. The 
longitude slider should have a range of-180 to 180 with increments of 0.00001. 


s 


w #slide la*t w ).slidcv-({ 


value : 0 r 

mm: -巧 O, 

step ： O.OOOOl, 

slide : function( event, ui 


$( 


la*ti*tudc 


).val( ui.value); 


})； 


j( 、啤 slide」。％” ) slidc\r({ 


value : 0 , 

mm: -100, 

ISO, 
step ； O.OOOOl, 

slide : function ( event, ui ) { 

$ ( " lohji-tudc " ) - val ( ui .value); 



my—scripts.js 


}); 


So far, you’ve checked off quite a few items from the list: 


V I- Build a da*tcpidkcr -for users -to da*tc o-f -the siglvtmg- 

Z. Build more radio buttons -for users {x> C\\oost d\rca*tu\rc -type- 


〆 


VI Build number — eh*bry sliders -for users *to disiahde -from d\rca*tuve, d\rca*tu\rc 
y/ci^lvt) d\rca*tuvc latitude, dr\d lor\^i*tudc. 


What’s up next? Now you need to build the cryptozoologists an interface that will allow 
users to enter the color of the creature they saw by using sliders that represent red, 
green, and blue. 


Build a dolor *m*tcv-fadc dompor\Ch*t -for user *to errter drca*tu\rc dolor. 
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jquery Ul 


l/Vc v\ttd values cadii 

slidev- -to be tor^uit^itA *to — 

£.vca*tc S tolov- yf 

Color 


养 red 


养 3' 


yttv\ 


养 blue 



养 swatch 


Computers mix color using red, greew, and blue 


The values of red, green, and blue each have a minimum of 0 and a 
maximum of 255. When each color is at its minimum — in other words, 
when red’s value is 0, green’s is 0, and blue’s is 0 — you get black. When 
each color is at its maximum — when red’s value is 255, green’s is 255, and 
blue’s is 255 — you get white. 


R 

B 


B 


R 








B 




__ W\\cy\ rtd, yrttY\, air>d blue 、 

values av-e 0, you bladk. 

W\\tr\ rtd^ value IS (ar>d blue av>d 
yccv> av-c sc*t *to 0) } you yt ved. 

gvcchs value is fa^d v-cd a^d 
blue 3\rc set *feo O), you get g\rcch. 


blue’s value is ( 扣 d red and 

av-c set *to 0), you yt blue. 

W\\tv\ ved, air>d blue av-c 

all ai 2^, you yt Wi 七 


Your sliders need to do the same 

So you need to build three different sliders: one for red, one for green, and 
one for blue. Then you’ll combine each of the slider’s values to become one 
color. Let’s look at what we need each slider widget to do. 


^ slid ^ ^ 



l/Ve also v\ttd -tV^c s^ieM *to 
be u\>ddied cvev-y a usev- 
slidcs ov\t o*f slidcv" V) 3 r\dlcs 



you are here ► 


399 























































ready bake slider code 


R 鄉 9 BaK 会 

^ — 眉 

0 >pe 


Add the bolded code to your sightings—end. html and your form, css file. This will 
get your files set up to build the color picker. 


//color slider styles 

#slide dist, #slide weight, #slide height { 


margin-bottom : 14px; 

} 

#swatch { 

width : 75px; 
height : 75px; 
background-image : 



CSS It) style 

ihai will show 
thc as ihc usc^ 

-the slides 



form.css 


#red .ui-slider-range { background : #ef2929; } 
#red .ui-slider-handle { border-color : #ef2929; } 

#green .ui-slider-range { background : #8ae234; } 
#green .ui-slider-handle { border-color : #8ae234; 


表〜 o-f styles 

Co\or 

sl'idcv- m 

sl'idcv- *bra 乙 k. 

} y 


#blue .ui-slider-range { background : #729fcf; } 
#blue .ui-slider-handle { border-color: #729fcf; } 


<h3>Color of Creature 


(use the color sliders to enter) : </h3> 

― _ 么 — 一 


mfut ^icldi will V^old 

value Co\or 


Color (in hexadecimal) : <input type="text" class= n just_display" 

creature—color” id="color_val M readonly:'▼ readonly”/Xbr /Xbr /> 丁 ^ ^ 《饮七 ^ 

dolor swa*t^^ 


name ： 

<div id= n swatch 


class= M ui-widget-content ui-corner-all n X/div> 


Red:<input type= M text" class= n just—display” name= n creature—color" id= n red_val n 
readonly:'▼ readonly”/> 

<div id="red"X/div> 4 ： -- 丁 dw -fov v~cdi sl'idcv- 


Green : <input type= n text" class= n just_display" name= n creature 一 color” id="green_val" 
readonly:'▼ readonly’▼/> 

<div id= n green " X/div> 一 s The div -Pov- i\\t slider 

Blue : <input type="text" class= n just— display” name= n creature—color" id= n blue_val" 
readonly:" readonly ▼▼/> 

<div id= n blue M x/div><^^ The div 4v- the blue slid 饮 


sightings_end.html 
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jquery ill 


i^arpen your pencil 


The script below sets up the red, green, and blue color sliders. Read each 
line and think about what it might do based on what you already know 
about jQuery and jQuery Ul. Then, write down what you think the code 
does. If you’re not sure what a line does, it’s perfectly OK to guess. We did 
one for you. 


$( ”#red, #green, #blue" ) .slider({ 
orientation : "horizontal ", 
range : "min ", 
max : 255, 
value : 127, 
slide: refreshSwatch, 
change : refreshSwatch 

})； 


Sets {he siidev so {he user ddh or\ly sclcd*t a maximum. 


What’s all that CSS that comes with 
jQuery Ul? 

The great thing about jQuery Ul is 
that the developers have thought out a lot 
of the complex CSS so that you don’t have 
to. You can learn about the CSS by looking 
through the file in the jQuery Ul package 
under jquery-ui- 1.8.16. custom/css/sunny/ 
jquery-ui- 1.8.16. custom.css. To read more 
about those CSS classes, visit jQuery Ul’s 
documentation at the following URL: 
http://jqueryui.com/docs/Theming/API. 

You said we can make our own 
theme for jQuery Ul. How do I do that? 



You can easily create your own theme by 
using jQuery Ul’s theme roller. First, point your 
browser to the theme roller application here: 

http://jqueryui. com/themeroller/ 

Then, click on the “Roll your own” tab. You’ll 
see settings for things like font, click states, 
drop shadows, and overlay screen. Make 
your own custom changes, and the Ul 
elements will change to reflect your design 
settings. 

When you have your theme set how you 
want it, just click the Download Theme 
button, and you’ll be taken to the Build Your 
Download page to create your own jQuery 
Ul package. If you want to save your theme 
for later, just bookmark that Build Your 
Download page. 

I don’t get the interactions widgets. 
What would I use those for? 


Interactions allow you to create the 
kind of interactive functionality you would 
find in a desktop application. 

Using the Draggable widgets, you can turn 
your elements into draggable components. 

The Droppable widget can be a target for a 
droppable widget. 

The Resizable widget turns your element 
into a scalable object whose size you can 
change by dragging on its corner, its right 
border, or its bottom border. 

Selectables are widgets that turn your 
elements into selectable components. A 
site visitor can drag his mouse over those 
elements to select them just like he might 
select files on his desktop. 

Sortables are widgets that can be 
interactively reordered by the user. 
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sharpen solution 


- %|^ ar p en y our p enCl l_ 

0^1. The script below sets up the red, green, and blue color sliders. Read each 

ilUlU vlwl I line and think about what it might do based on what you already know 

about jQuery and jQuery Ul. Then, write down what you think the code 
does. If you’re not sure what a line does, it’s perfectly OK to guess. Here are 
our answers. 

$( M #red, #green, #blue" ) .slider ({ TuV*hS. .9^ . iK?. divs -foy-. Rj6\3. slidcv ： .y/id.Scis ； . 

orientation: "horizontal", 

range : "min". Sets *the slider ra^c so *the user C^Y\ Ohly sclcd*t 3 maximum, 

max: 255, Sets the rr>cl>c. value.*to Zff {p s-jLi^k Apkv !!—i?... 

value: 127, the value so *tKc slider handles arc \r0u5hly *m *thc middijc ； 

slide: re f r e s h S wat c h' Calls B -fuhd*tioh horned vyKch the uscy slides, 

change : ref reshSwatch CdIU sdmc -fuhdtioh wKch 3r\y vdlue 

})； 


Puild the rcfreshSwatch fuwctiow 


To finish our color mixer, we need a Java Script function that will set and refresh 
the swatch. Here’s a skeleton version of that function, along with some of the key 
questions to consider before fleshing it out to get it to do what you want. 


function refreshSwatch() { 


var 

var 


red = 
green 


999 

籲籲籲 

- 999 

_ •籲 • 


How y/'ill you jet tv^c 
values o-f tacM slidcv- *m*to 
cadK o-f tv^ese variables? 


var blue = 
var my rgb 


999 J 

m m m 

- 999 ^ 

_ •籲 • 


^ h> the R^B 

values ih -this variable so that WC 
乙 set the to\o>r swatdh. 





TT #swatch TT ) . ? ? ? ; ^"""" 

TT #red_val n ) . val (red ); 
TT #blue_val n ) .val ( blue); 
TT #green_val TT ) . val ( green) 
TT #color val n ) . val (my rgb) 


I^VWt j 公 ue\ry mc-thod will Ic-t us 
兄七七 he Co\oy dolov*? 

A Wo big <\ucstiohs hcvc. \Nt Cav\ 

1 編 ply 仪 j^uc\ry s val method 

^ "t° s ^t the ihput -fields -fco show 

;l 七 k value of the slidcvs as they 

]That way, the usev will 

r khOW what the values 3V"C. 
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jquery Ul 



Weve already seen how to get 
the values from the sliders, but 
how do we create the color swatch? 
DorVt we need a bunch of code to 
convert hexadecimal web colors? 


Good catch! We could write a 
decimal-to-hexadecimal conversion 
function, or we could use the decimal 
values straight from the sliders. 

Remember that the CSS background-col or 
property allows us to specify colors like this: 


与 3 




background-color:rgb(255,0,255) 


But that’s just a hint for one of the 
questions. To write the whole function, 
you’ll have to do a little brain workout. 



Fill in the blank lines of code to finish off the refreshSwatch function. 

function refreshSwatch() { 

var red = 
var green = 
var blue = 
var my_rgb = 

$( n #swatch" )• 

$( n #red_val n ).val(red ); 

$( n #blue_val" ).val( blue); 

$( n #green_val n ).val( green); 

$( n #color val" ).val(my rgb); 


you are here ► 
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exercise solution 



SpLyilpH 


Fill in the blank lines of code to finish off the refreshSwatch function. 


function refreshSwatch() 


var red = 
var green 
var blue : 


j( “ 养 red” ).slidcv-( U valuc w ); 

•;( ).slidc\r( U value w ); 

C U #blue^ U\dM %alue w ); 


Si 


s 


By dohdatchatihg the values 
•nvto this vav-iablc... \ 

Vgb( u + red + u , w + ^rcch + u / ； + blue + u )^； 


var my_rgb = 

$ ( n #swatch n ) . j( w #sy/a*tdh w ).dss( %atkyro\AY\d^o\or ， ) )； 

$ ( n #red_val n ) .val(red ); 

$ ( n #blue val" ) .val( blue) 



$ ( n #green_val n ) .val( green) 
$ ( n #color val" ) .val(my rgb) 


...y/C CSv\ SC*t CSS (or 

sy/a*t^V^ "to C-ornkmcd values 

o( *tV)C Colors. 


(ZB Q © 


R 鄉 9 Ba 你 

震_ 


Update your my—scripts.js file to include the code for the color 
slider and refreshSwatch function on the previous pages. 
Add the lines below too. They will trigger the slider values to 
run the refreshSwatch function when the web page loads, 
which will start the web page with a colored swatch rather 
than an empty one. 


$ ( TT #red n ) . slider ( TT value TT f 127 ); 

$ ( n #green TT ) . slider ( n value TT , 127 ); 
$ ( n #blue n ) .slider( n value n , 127 ); 
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jquery ill 



Tesr Drii/q 


Open sightings_end.html in your favorite browser. Make sure to test the 
sliders using your mouse and keyboard (the left and right arrow keys 
should advance the slider by its increments). 


600 


00 W 


Submit Your Cryptid Sighting 

Fill out the form below and click "Enter" to Submit 




TTic uscv-s how chtcv- data 
by sliding the slide handles, a^d 
the ^\ryp-to2oologists have _ 乩 
bcHcv* dd'td fi>oh*brol. 
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a final button 


One last little thiwg... 

There’s just one item left on your checklist: 

Build d da*tcpidkc\r -for users *bo da*tc o-f *thc si^lvtm^. 

Build more radio buttons -for users *bo dhoose *thc dv-ca*turc -type- 

Build humbc\r-Ch*t\ry sliders -for users *to er\*tc\r disiahde -f\rom drca*ture, d\rea*tu\rc 
y/eiglvt, drca*turc height latitude, a^d lor^i*tude ， 

Build d dolor nailer *m*tcv--fadc donr\por\eh*t -for *the user *to errter Creature dolor. 
Build d hidcr—lookm^ submit button -for *thc si^lvtm^s -form. 

You’ve used buttons already in this chapter and you’ve 
been using buttons since Chapter 1, so this one should 
be pretty easy for you! 



We used the rgb setting for 
background-color for the color 
slider we built. What if I want to make 
a color slider that uses standard hex 
notation for colors? 

^\^lWe tried to create the most elegant and 
simple code possible for the color slider. If 
you need a color slider that will collect data 
in hex color format, you’re in luck. 

You can use the sample code for a simple 
color picker provided at the jQuery Ul site. 
Point your browser to the following URL: 

http://jqueryui.com/demos/sliderMcolorpicker 

Now, find the View Source link under the 
demo color picker. Select and copy the 
HTML, CSS, and jQuery code in the text 
field and save it into a new document. 

Make sure to link that document up to the 
appropriate CSS and jQuery files in your 
copy of the jQuery bundle. Voila—you have 
a color picker that uses hex values for color. 



I need a form field that will suggest 
search terms as a user types. Does 
jQuery Ul have anything for that? 

Yes! One of jQuery’s newest features, 
at the time of this writing (August 2011), is 
the Autocomplete widget, which displays 
suggestions for search terms as a user types 
into a form field. 

Where do the search terms come from? You 
provide them in a JavaScript array, from a 
URL, or using a callback function that can 
grab the data from a server using the Ajax 
methods you learned in Chapters 8 and 9. 
For more information on this widget, visit 
jQuery Ul’s demo page here: 

http://jqueryui.com/demos/autocomplete/ 


Does jQuery Ul provide any sort of 
form validation? 

No. Unfortunately, jQuery Ul does not 
provide form validation, but there is a jQuery 
plug-in that works well for validation. You can 
find the plug-in here: 

http://bassistance.de/jquery-plugins/jquery- 

plugin-validation/ 

We talk more about that plug-in in Appendix i. 
Check there for more information. 
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jquery Ul 



Wait. Sure, weve used 
buttons since Chapter 1, but 
this is a jQuery UI button and 
an HTML form element. 


OK, good point. 

We’ve used jQuery 5 s click method and jQuery UI’s button 
method, but we haven’t done much with selectingform elements like input 
submit buttons. Here’s a quick guide on how to select those. 




BULLET POINTS 


■ $ ( n ： input") = Select all input 
elements 

■ $ ( n ： text" ) = Select all 
elements of type text 


■ $ ( f, ： checked" ) = Select all 

inputs that have been checked 


■ 


$ (’▼: selected") = Select all 
inputs that have been selected 


■ $ ( n ： radio") = Select all input 
elements of type radio 

■ $ (": checkbox" ) =Select all 
elements of type checkbox 

■ $ ( n ： submit") = Select all input 
elements of type submit 

■ $ ( n ： reset") = Select all input 
elements of type reset 


■ $(’▼: enabled" ) = Select all 
inputs that are enabled 

■ $ ( n ： disabled") = Select all 
inputs that are disabled 

■ $ ( n : password" ) = Select 
all inputs that are intended for 
passwords 



Write the single line of code you need to add to my_scripts.js that will transform the pill 
button into a themed jQuery Ul button. 
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exercise solution 


Qpi 


PLjiiipH 


Be sure to add this to your my_scripts.js file and test it out by opening sightings_end.html in 
your favorite browser. 


( w bu*t*boh ： submi*t W ) butter/) 


































































jquery Ul 


Bonus 


Your form looks great, but it doesn’t actually submit any data at this point. However, you learned 
everything you need to do that back in Chapter 9, so take some time to think through how you 
could make this stylish form truly functional. 


The end folder in the code you downloaded for this chapter contains all the code you need to get this 
up and working: sightings.html, service.php, and sightings.sql. You will have to do some work on 
your own to get it set up, but that’s what being a web developer is all about, isn’t it? We included the 
Ajax and JSON methods you learned in Chapter 9 so that the form you just built can submit data. 


You need to do all of the setup on your own (i.e., run the sightings.sql script or create the database 
with the fields in that script yourself, and add the Ajax and JSON methods to your my_scripts.js file). 
You also need to add some records to the database before going on to Chapter 11. If you need a 
refresher on MySQL, PHP, and AJAX, feel free to go back to Chapters 8 and 9. 


^3^0 pue s-^o^e 叫+ 吩 !/a w pue 汕 o? scje|+sj^pe 叫 ./a/a/a ^ooc^ s! 分 ^ 

叫子 UO JvmioC ske^\e 以 e? ⑽人 ( S^y\SS\ Gu! 八 3' 灼 0 人 y ^C|SIH^. OC). V40I^|0S OU 丄 
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your jquery toolbox 



Your jftuery Toolbox 

You’ve got Chapter 10 under your 
belt and now you’ve added jQuery 
Ul to your toolbox. 


〜鄭 、珍 # 


V\My*t , dds ww 构仫 

A sc \Uo^tA t ⑽—⑽ 

njouv v/cb 

, so jf 6o d^ 七1 一 d 6 om ? lc^7 
Saves 70 U Ws o^r toa 3 c l cw ^ts. 

』一叫 — e 


Button Widjct 

provides d button method *to V>d? 
7 ou make more a\>\>calm5 
clcm^ts like suWt UtW, 'radio 
butw, a^a ^cdkbo^cs. 


M .、扣二！ 

义 ，一 w'p 士 


^lidc^s 

kc y^d^ 0h i n ^ ousc ^ 

心 7 : t llih9 ihe 
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11 jQuery and A?is 








Objects，objects everywhere 



•sr 


I wonder what I’ll get 
this year? I hope it’s 
another API... 




• . - •» I 

.: 裔 m 



As talented a developer as you are, you can’t do it all alone... 

We’ve seen how we can include jQuery plug-ins, like jQuery Ul or the tabs navigation 
to help boost our jQuery app, without much effort. To take our applications to the next 
level, apply some of the really cool tools out there on the Internet, and use information 
provided by the big hitters — like Google, Twitter, or Yahoo! — we need something...more. 
Those companies, and many others, provide APIs (application programming interfaces) 
to their services so you can include them in your site. In this chapter, well look at some 
API basics and use a very common one: the Google Maps API. 


this is a new chapter 
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a cryptid reunion 


Where's WdMo Sasquatch? 

Dr. Pattersby and Dr. Gimli want to add some more cool 
features to their website — think you’re up to the task? 


From: Dr. Gimli [gimli@cryptozoolologists.org] 

Subject: Some more updates to our site 

Hey guys, 

Thank you so much for helping make our website more user-friendly and easier to 
collect data about sightings. We’ve had a substantial increase in traffic, so we re y 
excited to look at all the data we’re collecting. 

We've had several requests to make the information more accessible to the masses. 

Lots of people are interested in the sightings data, so we'd like to give them a way to 

see what we've collected. 

Here's what we need: 

1) We，d like to be able to select a single sighting and view the information associated 
with it. Along with the information about the cryptid, we'd like to see the latitude 
longitude information appear on a Google map. 

2) When a point is displayed on the Google map, we'd like to be able to click it to see 
more information about the sighting. 

3) We 5 d like to be able to select the creature type from a list and display all the creatures 
associated with that type from our database. We'd also like to see all the creatures 
with that type on a Google map, so we can find some sighting hotspots to examine 
more closely. Can all these points be clickable, as well as the list of creatures, so 
users can see more information about each one? 

Not too much to ask, right, since we already have all the information stored? 

Looking forward to hearing from you! 

Dr. Gimli and Dr. Pattersby 
cryptozoologists.org 
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jquery and APIs 


This should be a piece of cake. It looks like the 
crypto doctors are only asking for a few things. 





Fv^hk 


Joe: Are you talking about the Google map we need to build? 
Frank: Yep. Pretty straightforward... 

Jim: Straightforward? They want a whole Google map! 
Frank: Yep. 

Jim: Multiple points on the map — one for each of their 
cryptids — each being clickable for more information … 

Frank: Yeah, I think I know how to do that. 

Jim: And custom click on the list to interact with the points 
and show the “more information” pop ups on the map. 

Frank: Yeah, uh, I’m not too sure how to do that. 

Joe: No worries on that part. The Google Maps folk provide 
an API we can use to get the job done. 

Jim: AP what? 

Frank: API. It’s short for application programming interface. It’s 
how companies like Google, Netflix, and Yahoo! enable us to 
use some of their cool tools on our own sites. 


Jim: That does sound pretty cool, but will it give us all the pop 
ups and whatever else we need to put on the map? 

Joe: Well, it should. Maybe we should look at the Google Maps 
API to see how it works. 


you are here ► 
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inside the API 


The froogle Maps API 

For any API you want to use, you can look up documentation and get sample code 
online. We grabbed this sample from http:/ / code.google.com/apis/maps. 


var map; 

function initialize () { 

var myLatlng = new google.maps.LatLng(40.720721,-74.005966); 
var myOptions = { 
zoom: 13, 
center : myLatlng, 

mapTypeld: google.maps.MapTypeld•ROADMAP 

} 

map = new google•maps•Map(document•getElementByld( n map_canvas n ), myOptions); 

google•maps•event•addListener(map, 1 zoom_changed', function () { 

setTimeout(moveToNewYork, 3000); 

})； 

var marker = new google.maps.Marker({ 

position : myLatlng, 
map : map. 


title : "Hello World!" 


})； 


google.maps.event.addListener(marker, 'click', function() 
map.setZoom(8); 

})； 


function moveToNewYork() { 

var NewYork = new google.maps.LatLng(45.526585, -122.642612); 
map.setCenter(NewYork); 


OK, I recognize some variables and 
functions in there, but whafs all 
that other stuff? 
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That’s Google’s code. 

It’s not as bad as it looks. Let’s see what’s 
going on in the code in a little more detail. 










jquery and APIs 


APIs use objects 

Back in Chapter 6, we created our own Java Script objects with properties and 
methods to store and use information as we saw fit. Many companies — like 
Google, Netflix, Microsoft, and Yahoo! — also create API objects to allow us to 
interact with their data. If you need a little reminder, feel free to hop back there to 
reacquaint yourself with objects and how they work. 


Pcdav-c variables. 


Set the 你 ap 

vav-iablc -fco 
be a 、 
google /i/laps 
objedt. 



iWis variable a 

hCW 与 。。 * objd.. 



var map; 

var myLatlng = new google.maps.LatLng(40.720721,-74.005966); 


var myOptions 
zoom: 13, 




Create array bo sWc 

some of*tioy\S W 眯外 . 


center : myLatlng, 

mapTypeld: google.maps.MapTypeld•ROADMAP 


Pass \y\ some latitude 
dr\d lor^rtudc values as 
pavametevs of ou\r object 


"fell the map \a> Jo m -the 
r»»ap__dahvas element. 


‘map = new google•maps•Map(document•getElementByld( n map canvas"), myOptions); 


google•maps•event•addListener(map, 'zoom_changed', function () 
setTimeout (moveToNewYork, 3000^^^ 

})； 


/\dd By\ cvcir\*t lis*tcr\C\r 
*to OUV" 6(OO0^t 


Pctlav-c a variable 
as a Mav-kcv- objedt 

Raw i h values 
p^v-arhctcv-s. 


"var marker = new google.maps.Marker({ 

position : myLatlng,^^ — 一 ~' TKc La*tL^5 ^ above 

map: map, - - - The Ma\> objedt wc dedlav^ed above 

title : "Hello World!" 


})； 


3 -fuh^-tioh -fco ddll 
「 some mo\rc google dodc- 

function moveToNewYork() { 




Cv-ca*tc ay\o*t)ic\r 

LatL 灼 5 object 


var NewYork = new google.maps.LatLng(45.526585 
map.setCenter(NewYork); 


-122.642612); 


Tell *tV>c maf v/V>cv"C 

■to 
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why use objects? 



So APIs do everything with objects? 

Why would we use objects created 
by somebody else? 

、 - - - 

Because it speeds everything up. 

Like we saw back in Chapter 6, objects offer smarter storage. You use objects 
when you need to store multiple variables about a particular thing. An API is just a 
series of object constructors that allow you to create your own instances of other 
people’s objects. Then, once you have an instance, you can use all the properties 
and methods associated with those objects in your code! 

The complexities of creating a mapping application for everyone to use are 
exactly why Google uses objects in its API. That way, it can create objects with 
many different methods and properties for all the different elements you’d need 
to build a map. 

From the code on the previous page, you can see that the map object has 
properties of zoom, center, and mapTypeld — plus many more that we 
haven’t shown here. The map also has many methods, like setCenter. 

+ Create anew P 一 d 峽 — 一 and 

伞 save it in your project folder for this chapter. 



<!DOCTYPE html> 

<html> 

<head> 

<title>View Cryptid Sightings</title> 

<link type= M text/css" href= M style/form.css" rel= M stylesheet M /> display_One.html 

<link type= M text/css" href= M jquery-ui-1.8.16.custom/css/sunny/jquery-ui-1.8.16.custom.css" /> 
</head> 

<body> 

<div class= M ui-widget-header ui-corner-top form—pad n > 

<h2>View Cryptid Sightings</h2> 

</div> 

<div class= M ui-widget-content form—pad n > 

<div id= M map_canvas M x/div> - 

</div> 


Create a flatc 

-fov* ouV" to 5°* 




l^ludc the google Maps API. 


<script src= M http :/ /maps.google.com/maps/api/js?sensor=false M ></script> 

<script src= M scripts/jquery-1.6.2 .min . j s M ></script> ^__ |y\£.ludic 

<script src= M scripts/maps.js M ></script> librav-y. 

</body> Mude a _ mafsjs 


Ic. 


</html> 


— 
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jquery and APIs 


Include Google maps m your page 


First, make a copy of all the files you have from the end of the previous chapter. We’ll use all the same files in this 
solution too, so we might as well pick up where we left off. All that code plus your new display_one.html file will give us 
two important new things: 



A div with the ID of map_canvas. 

The Google Maps API code, by adding <script type= n text/javascript" src= M http : / /maps . google. com/ 
maps/api/js?sensor=false M X/script>. 


To include a Google map on that page, you’ll need to create a maps.js file and add a function to it that 
calls the API code to build a map on the page. 



jQueiy Code Magnets 


Rearrange the magnets to complete the code to create a function called initialize. 
This function will then create a new instance of the Google Maps map object, using 
some parameters defined in the code. The new map object will then be applied to the 
map_canvas element on the page. Also, update your existing form.css file to include 
some style definition for the map container. 


map; 


float 


zoom 


HYBRID 


$(document).ready 
var 


function 


#map canvas 


left; 


height : 450px; 
width : 


var latlng = new google.maps.LatLng. 
var mapOpts = { 

_ : 13, 

center : latlng, 

mapTypeld : google.maps.MapTypeld. 



form.css 


map 


google.maps.Map(document.getElementByld( 


),mapOpts) 


initialize (); 


})； 



(45.519098,- 

-122.672138) 

I initialize() 


| M map_canvas , ^J 

new 

| 450p^；] 

(function ()1 



maps.js 
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jquery code magnets solution 




jQueiy Cocte Magnets Solution 

Rearrange the magnets to complete the code to create a function called 
initialize. This function will then create a new instance of the Google Maps map 
object, using some parameters defined in the code. The new map object will then be 
applied to the map_canvas element on the page. Also, update your existing form.css 
file to include some style definition for the map container. 


$(document) .ready. I (function() 


var 


map; 


function 


initialize() 


#map canvas 


float 


: left 』 


height": 450px; 
width 




var latlng = new google.maps.LatLng. 
var mapOpts = { 

13, 

latlng. 


(45.519098,-122.672138) 



form.css 


zoom 


center 

mapTypeld: google .maps.MapTypeld.J HYBRID 


map 


new 


google.maps.Map(document.getElementByld(」 n map canvas" I )> mapOpts); 


initialize(); 


})； 



maps.js 


thereicir 

Dumb 


e no o 

Questi9ns 


What about that LatLng object and 
mapOpts property? 

You can find more information about the API’s 
objects, methods, and more at http://code.google. 
com/apis/maps/documentation/javascript/reference. 
html. This website offers some example code and 
more details about all the different objects and 
methods you'll need to interact with. 


Is Google Maps my only option for 
creating a map? 

Definitely not! It is probably the most popular 
though, which is why we’re using it here. Other 
companies like Yahoo!, Microsoft, MapQuest, and 
OpenLayers also offer Mapping APIs. 
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jquery and APIs 



“.Portland 


It*s great that 


that easy 


was 


the page 


but I dont 


to 


get 


see 


map 


on 


a 


any of the cryptid data yet. We need 


to 


get that out of the database, right? 


Exactly. 

Back in Chapter 9, you learned how we can get information from 
a MySQL database, using jQuery, Ajax, JSON, PHP, and MySQL. 
Although that’s quite a list of technologies, it did exactly what we 
needed it to. Let’s see how we can apply that here again. 


iu>cil Crest ’ 

Google- 

… ■- * 


鬥 I 冋 

☆ 、 


O View Cryptid Sightings 

令 GO thinkjquery.com/chapterll/stepl/display_one.html 


Update your maps.js file with the initialize function you put together with the 
magnets. Also, ensure that the maps.js file is included in display—one.html. Then, open up 
display—one.html’m your browser. You should run all your code through your web server, 
so the URL should say http ://, not file:/ /. 
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some familiar friends 


fretting JSON data with SQL awd PHP 

Chapter 9 showed how a SQL select statement could pull the 
information you wanted out of the database so that a PHP file could 
turn it into JSON and return it to our page, using Ajax. 

You also learned how to use Ajax to get JSON-encoded information 
from a PHP file. For PHP to return JSON data, it was easy — the 
j son—encode function, which accepted an array, gave back 
JSON-encoded data so that j Query could interact with it. 


$my—array = array(); 

array push($my array, array('my key ' => 'my val '))； 


echo j son encode ( $my array); 


The web sc\rvc\r j>v-odcsscs web 

PHP ^ rver computer 

v-ctu\r^s HT/WL 

Client browser \ \ 





MySQL database 



TV^c database 

s*bovcd A-»lcs oy\ a 

V^avd dvWc, W 七 , 七如⑽七 
y\cdcssav'»lY V^avc *to kc- 


SELECT COLUMN NAME1, COLUMN NAME2 FROM TABLE NAME order by COLUMN NAME1 ASC 


For this chapter, we’ve written all of the PHP and SQL for you. As long as 
you’ve got the MySQL database from Chapter 10, you’re good to go! The 
rest of the SQL and PHP code are in the downloads for this chapter. Feel 
free to run them on your own server. You can download all the PHP and 
SQL in a single file from httpsllthinkjquery.comlchapterl 1 lendlservice.zip. 
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jQueiy ， HTML，and CSS Code Magnets 

Rearrange the magnets to update your display_one.html, forms.css, and maps. 
js files to get your data via JSON and display it on the screen. Add a div and 
a ul element to hold the data, some CSS to style the list, and a function to 
get the data, via JSON, to add each cryptid to the list. 


function getAHSightings () { 

$.getJSON("service.php?action=getAllSightings ", 

if (__length > 0) { 

$( n #sight list ”） _; 



_(json•sightings,function() { 

var info = 'Date : ▼ + this['date'] + ', Type : ’ + this['type']; 


maps.js 


var $1 


( n <li />，▼); 


$li.addClass( 


map canvas 


'sightings 


$li•attr(’id ’， this['id'] 
$li.appendTo( 


})； 


li.sightings : hover 


})； 


$li.html(info); 


<div class= M ui-widget-content form_pad M > 
<div id= ></div> 


<div id= M sight_nav M > 

<ul id= _ 

</ul> 

</div> 

</div> 


> 





丨 .empty—()| 


ist-style:none; 


display—one.html 


sight_list’ 


M #sight list' 


function(j son) 


json.sightings 




form.css 


#sight_nav{ 
float : left; 

} 

ul#sight—list{ 
width : 150px; 
padding : Opx; 
margin : Opx; 


li.sightings { 
padding : 4px; 
background : #7B7382; 
border : lpx #000 solid; 
color :# f f f; 


background: #eee; 
color : # 0 0 0; 
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jQueiy ， HTML，and CSS Code Magnets Solution 

Rearrange the magnets to update your display_one.html, forms.css, and 
maps.js files to get your data, via JSON, and display it on the screen. 

Add a div and a ul element to hold the data, some CSS to style the list, 
and a function to get the data, via JSON, and add each cryptid to the list. 


function getAHSightings () { 

$.getJSON("service.php?action=getAllSightings 


if (] j son. sightings . 

[Length > 

$ ( n #sight list ’，） 

.empty() 


function(j son) 


$.each 



(json•sightings,function() { 

var info = 'Date: ' + this['date' 
var $li = $ ("<li />"); 


Type : 


maps.js 

+ this[* type']; 


$li.html(info); 


$li.addClass( 

"sightings" | 


$li.attr('id', this['id'] 
$li.appendTo ( "#sight_list" 


})； 


})； 


#sight_nav{ 
float : left; 

} 

ul#sight—list{ 
width : 150px, 
padding : Opx, 
margin : Opx; 




<div class= M ui-widget-content form pad M > 



</ul> 

</div> 

</div> 


display—one.html 



li.sightings { 
padding : 4px; 
background : #7B7382; 
border : lpx #000 solid; 
color :# f f f; 

I list-style:none; I 


li.sightings : hover { 
background : #eee; 


color : # 0 0 0; 



form.css 
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jquery and APIs 


Tesr DriVq - 

Update your maps.js file with the getAll Sightings function you just completed. 
Also, add a call to this new function at the end of the initialize function. Then 
open up display—one.html’m your browser. This assumes you’ve added some creatures 
to your database, back in Chapter 10; if not, be sure to do so now. Remember, you 
should run all your code through your web server, so the URL should say http ://, 
not file:/ /. 


问 —Ka—T 


O View Cryptid Sightings 

令 C O thinkjquery.com/chapterll/step2/display_one.html 


View Cryptid Sightings 


m 


^Northwesi 




I. : ’Ifvinq 
I City Park 






C. NE K 


Tf^hT ： 


I Satellite Date ： 1933-08-04, 
m Type: Loch Ness 
Monster 


巧醪 ♦ 


Date: 1967-10-20, 
^NE : &rc< Type: Sasquatch 


IlsifJe - I 
>rihwesi 
)I strict 

riir>gtqn 

■ieights , * 1 


|Nonhwes, v 

I J|Date: 2011-08-01, 

k 1 ' ® ’ _ Type: Ch 叩 acabras 

: pV'd 四 i 二 r. 

1 二 ^ '©: •••' oa^on-os-,, 

£3 /：'■：; U,A+. • lon-os-n 


• Type: Loch Ness 
Monster 


■' 藏 > @ 

Oregon Health arid J-T^l 

.SaengO^ersity^h 


.-r-：；：... • Date: 201 1-08-13. 

• Type Sasquatch 

: Date: 201 1 -08-13, 

乂 : Hosford - Type: Loch Ness 

A f rnethy i Monster 

-*i V ， 


iuncil Cresl : ’ 
l^ity ParkJ,.- 

Cooglc 


攀 I 

Hon-esleac 


t 象 


Date: 201 1-08-13, 
Type: Yeti 

Date: 201 1-08-16, 
Type: Sasquatch 



Thafs nice looking and all, but 
all this code still doesn’t actually 
display anything on our map. 


Right. We need to be 
able to add our cryptid 
data to the map. 

Google Maps provides a very 
easy method to do this. Let’s 
have a look at how that works. 


☆ 



















make your mark(er) 


Points ow a map arc markers 

When it comes to putting points on a map, Google’s got it down. 
However, Google doesn’t call them points. It calls them markers. 
Markers are objects — just like everything else in the Google Maps 
API — and have their own methods and properties for interaction 
and manipulation. 


var myLatLng 


Pc-fmc a La 七 L% ob\ct*t 

-fvom 6\oo^\t Alaps API* 




Pass actual Latitude dKtd 
Lohjitudc values as pav-ametev-s. 



=new google.maps.LatLng(45.519098,-122.672138); 


var my marker = 


new 



google.maps.Marker({ 


Call £.o^S"t\rud"to\r o-P 

七 he google /Wavkcv object 


A p^rcdc-Pihcd 

object. 

Vou ; vc 

^cady scch 
i h a^-tioh. 


position: - - ㈣ ously darned LatU^ 

map : map, object as a \>av-a^c*tcv-* 

title : M Hi! a marker. Seen me around before? n 




rtcv-c, Y/c’vc SC 七栋 C 
仏 c mav-kcv-, Wat add I 七 



Hi! I’m a marker. Pleased to mark, 
ahem, make your acquaintance. Tm 
sure youve seen me around before? 
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%|harpen your pencil 

乂 Update your get? 


Update your getAllSightings function to add a click event listener to the list item, before it gets 


added to the list. This click event should call a custom function, called gets ingle Sighting, which 
take a single parameter — the ID of the clicked sighting. This new function should then load information 
about the clicked item and add it as a marker on the map, using its latitude and longitude properties. 


function getAHSightings () { 

$ . get JSON ( "service . php ? act ion=get All Sigh tings M function (j son) { 
if (j son.sightings.length > 0) { 

$("#sight_list M ).empty(); 

$.each(j son.sightings , function() { 

var info = * Date : ' + this['date'] + ▼, Type : ▼ + this[▼type▼]; 

var $li = $ ( "<li / >"); 

$li.html(info); 

$li.addClass("sightings"); 

$li.attr('id', this['id']); 

$li.click(function(){ 

_ thisricT]); 

})； 

$li.appendTo("#sight—list n ); 

})； 

} 

})； 

} 

function getSingleSighting (_) { 

$.getJSON("service.php?action=getSingleSighting&id= n +id, function (j son) { 
if (j son.sightings.length > 0) { 


var loc = new google.maps.LatLng(this['lat'], this['long']); 

var my_marker = new google . maps_({ 

loc. 



map : map, 

title : this['type'] 

})； 


setCenter(loc, 20); 




maps.js 


you are here ► 


425 














sharpen solution 


^lidrpen your pencil 


After you’ve completed the code, your list items will be clickable, which 
will then load data about the clicked cryptid and put it on the map. 


function getAHSightings () { 

$.getJSON("service.php?action=getAllSightings M , function(j son) { 
if (j son.sightings.length > 0) { 


$( n #sight—list n )•empty(); 

$.each (json.sightings,function() { 

var info = 'Date: ' + this['date'] + ', Type : ' + this['type']; 

var $li = $("<li / > M ); 

$li.html(info); 

$li.addClass("sightings"); 

$li•attr('id ’， this['id']); 

$li.click(function(){ 


grtSiy^leSiglvtnr^this [ ， icT ]); 

}); 

$li.appendTo("#sight list"); 


function getSingleSighting ( id ) { 

$.getJSON("service.php?action=getSingleSighting&id=" +id, function (j son) { 
if (j son.sightings.length > 0) { 



var loc = new google•maps•LatLng(this['lat'], this['long *])； 


var my_marker = new google. maps./\/Ia\rkc\r( { 
position loc, 
map : map, 

title : this['type'] 


map. setCenter(loc, 20); 



maps.js 
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Dwi/e 


Update your maps.js file with the getAllSightings and getSingleSighting 
functions you just completed. Then open up display_one.html in your browser, using http:/ / 
like before. 


◦ View Cryptid Sightings 


You’ve already nailed the first two requirements, so let’s 
have a look at the final thing the doctors asked for. 


3) We’d like to be able to select the creature type from a list and display all the 

creatures associated with that type from our database. We’d also like to see all the 
creatures with that type on a Google map so we can find some sighting hotspo s 
to examine more closely. Can all these points be clickable, as well as the list of 
creatures, so users can see more information about each one? 


Wow! Thafs looking really impressive. 

How’s the other piece of what we asked for 
coming along? You know, where we have multiple 
creatures displayed at the same time. 


View Cryptid Sightings 


Satellite 


Loch Ness 


lnvWiga,g 


nm 


Google 


Date: 1933-08-04, 
Type: Loch Ness 
Monster 

Date: 1967-10-20, 
Type: Sasquatch 

Date: 2011-08-01, 
Type: Chupacabras 

Date: 2011-08-04, 
Type: Chupacabras 

Date: 201 1-08-12, 
Type: Loch Ness 
Monster 

Date: 201 1-08-13, 
Type: Sasquatch 

Date: 201 1-08-13, 
Type: Loch Ness 
Monster 

Date: 201 1-08-13, 
Type: Yeti 

Date: 2011-08-16, 
Type: Sasquatch 


Map Data - Terms of Use 


O thinlgquery.com/chapterll/step3/display_one.html 
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ready bake creature drop-down 


Multicreature checklist 

Here’s what we need in order to nail this last request: 

I. A dvop-dowh lis*t wi*th list o-f dvca*tu\rc -types (sclcd*tcd -fvom dd*bdbdse)> 

Z. W\\tY\ drop — dovm list yt a list of d\rca*tuvcs -fv-ona da~bdbdse 七 *the sclcd-tcd -type. 

冬 . Display all -the d\rca*tuvcs returned -from *tKc database *m -tKc list oy\ -the map. 

午 . Bo*th *thc list dhd *thc po*m*tc\rs should be dlidkable so users ddh yt move m-fov-ma*tioh oy\ *thc map *bo pop up. 

Create a new page called display_type.html and save it in the same directory as the 
other HTML files for this project. This new file will display the list of creature 
types that can be selected. Then, once selected, all the creatures of that type will be 
displayed on the map. The structure and style of this new page is very similar to our 
old page, except for the addition of a select element with the ID of ddl Types. 


> in) q 

0 >pe 


<!DOCTYPE html> 
<html> 


<head> 

<title>View Cryptid Sightings</title> 

<link type= M text/css n href= M style/form.css" rel="stylesheet" / > 

<link type= M text/css" href= M jquery-ui-1.8.16.custom/css/sunny/ 
jquery-ui-1.8.16.custom.css M /> 

</head> 

<body> 

<div class= M ui-widget-header ui-corner-top form_pad"> 

<h2>View Cryptid Sightings</h2> 

</div> 


<div class= M ui-widget-content form_pad"> 

<div id="map_canvas M x/div> 

<div id= n sight—nav n > / — Add 3 dv*of—doy/r\ *to t 

〈select id= M ddlTypes n > popula*tcd tv-catu^rc 

<option value= M Please Select --</option> 

</select> 


<ul id= 
</div> 

</div> 


sight—list"></ul> 

Include ihe google /Waps API. 


〈script src="http :/ /maps.google.com/maps/api/js?sensor=false M ></script 〉 
<script src="scripts/jquery-1.6.2.min.j s"></script> 


<script src="scripts/maps.js"></script> 
</body> 

(kl 



</html> 


Jude 七 he mafs.js 


Ihdludc the j^uc\ry libvav-y. 


1 


display_type.html 
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jQueiy Code Magnets 

Rearrange the magnets to complete the getAHTypes function.This function will call the service.php file 
(which should be included in your downloads for this chapter) to get a list of the different creature 
types in the database. These creature types should then be added to the drop-down list, with the 
ID of ddlTypes. Also, create an event listener on the drop-down list to listen for a change event 
and alert the selected value. Finally, since we're using the same mops.js file for our two HTML files, 
add some logic to the initialize function to check if the drop-down list exists. If it does, call the 
getAHTypes function. Otherwise, call the getAllSightings function. 


function initialize () { 


map = new google•maps•Map(document•getElementByld( 
if ( $('#ddlTypes').length ) { 


),mapOpts); 


}else{ 


function getAHTypes () { 

$.getJSON("service.php?action=getSightingsTypes ", function(json_types) { 

if (_creature_types . length >0) { 

$ . each (j son_types . creature—types, 
var info = this['type']; 

var $li = _ 

$li.html(info); 

$1 

})； 


.appendTo 


_change (function() { 

if($(this).val() != nn ){ 

alert ( $(this) .val()); 

} 

})； 


maps.js 
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jquery code magnets solution 



jQueiy Code Magnets Solution 


Now you’ve got a drop-down list associated with your Google map, a function to grab the data 
(in JSON) on the selected creature types from the database, and an alert showing which creature 
type was selected. 


function initialize () 


map = new google•maps•Map(document•getElementByld( 
if ( $('#ddlTypes').length ) { 


map canvas 


mapOpts); 


getAllTypes (); 


}else{ 


getAllSightings () 


Use poprb/ 

•to tKcdk -fov- 


ihc types -the database 
usmg JSdd PUP. 

function getAllTypes() 

$.getJSON("service.php?action=getSightingsTypes M , function(json—types) 
if 


Sc*t *tV^c 

dv"opdoy/\r\ list 


}); 



I j son typesT^ creature—types•length > 0) 

.each(json—types•creature—types, | function () 
var info = this['type']; 

var $li = J $ (^o ption />”) ； 

$li.html(info); 

$li . appendTo ( n #ddlTypes ▼'); 

} ) ; ^ - ⑼ d ofW item 

Adda l*,sW ，U “ c 岭 d_l 洗 
i\\t cvcr\*t oy\ 

■tV^c dv-of-doy/y\ list 


$(’ #ddlTypes f ) . Jchange(function () 


if($(this).val() != nn ){ 

alert ( $(this) .val() 



}) 


TV^c value o-f sclented 

OY\ ■(Jie lis 七 



maps.js 
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jquery and APIs 


Dwi/e 


Update your maps.js file with the getAllTypes function and the event listener for the 
change event on the drop-down list. Also, update your initialize function with this 
new logic. Then open up display_type.html in your browser, again using http://. 



O View Cryptid Sightings 


View Cryptid Sightings 


Irving •- 

■: hi •邏 Satellite 


Loch Ness Monster 


户 The page at thinkjquery.com sa 


Loch Ness Monster 


mncil Cresl 
: ityPark^ 


O thinlgquery.com/chapterll/step4/display_type.html 


You’re really cookin’ now. You’ll have this map finished up in no time! 

Time to cross off a couple of those requirements. 

2>. listrrKs^ciT"crCPtwrci ■thoit 

冬 . Display all -the Creatures returned -from database'm list ar\d oy \ -the map. 

午 . Bo*th *the lis*t dr\d *thc 你外 pomters should be dlidkable so users CBy\ gc*t n«o\rc 'm-fo\rinr\a*tioh oy\ *the 你外 *bo 
pop up. 
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not so fast 



Hey! Not so fast! When I select an 
item from the drop-down list, I don’t see 
creatures. I only see an alert pop up. I don’t 
think were done with the second item yet! 


You’ve got us there. 

We need to update our code so we can get information 
from the database when the drop-down list is changed, 
instead of just showing the creature type in an alert box. 

Then we can mark that one off the list. But while we’re 
at it, we should be able knock off the third item on the 
list too. Roll up your sleeves — we’re about to dive in and 
put this all together. 





Fill in the missing lines of code to create a getSightingsByType function. This function should 
accept one parameter: the creature type you are viewing. This function should get its data in JSON 
format, loop through all the returned creatures (if there are any), and add points for each one on the 
map. Also, create two more global variables: an array called markerArray and a new Google Maps 
LatLngBounds object called bounds. Also, create a function that clears the previous points, before 
adding any new ones, if the drop-down list is changed. 


var markersArray =[]; 

var bounds = new google.maps 


function getSightingsByType(type){ 

$.getJSON("service.php?action=getSightingsByType&type="+type, function (j son) 


if 


sightings.length > 0) 


$('#sight—list')•empty(); 

$.each(j son.sightings,function() 

var loc = new google.maps_ 

var opts = { 
map : map, 
position : 


(this['lat'], this['long']); 
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$li.appendTo( n #sight 一 list"); 
bounds.extend(loc); 


map.fitBounds(bounds); 



$('#ddlTypes') .change (function() { 

if ($ (this) .val () !=，，，'）{ 

clearOverlays(); 
_( $ (this)•val() 

})； 

function _ { 

if (markersArray) { 

for (i in markersArray) { 

markersArray[i].setMap(null); 


markersArray.length 
bounds = null; 
bounds = new 


LatLngBounds(); 


maps.js 


you are here ► 


433 














long exercise solution 



tp^S EicegciSe 

SplyttOH 


With the addition of the two new global variables and some other Google Maps functions, you can 
now add and remove markers from the map when the drop-down list is changed. As the markers 
are being added to the map, they are also added to the markerArray array and used to extend 
the map’s bounds. This way, the map can autozoom to fit all the points, using the f itBounds 
function. The getsightingsByType function, now called on any change of the drop-down 
list, adds the markers to the map and adds the creature to the list on the page. 



\r\cv/ 




var markersArray =[]; 

var bounds = new google .maps .L3*tL^BouhdsO( 
function getsightingsByType(type){ 

$.getJSON("service.php?action=getSightingsByType&type= n +type, function(json) 



ouv JSON- 


if (jsor\. sightings . length > 0 ) { 

$('#sight—list')•empty(); 

$.each(j son.sightings , function () { 

var loc = new google•maps 丄』七匕扒。 （ this['lat'], this['long '])； 
var opts — { 


map : map, 
position : \ot 


okjc^*t -for pom*b 
yl oy\ w>ap. 


}) 


var marker = new google.maps •Marker (opts); 
markersArray. push ( nr\a\rkcV") ; 
var $li = $ ( "<li / >"); 

$li.html(* Date : ▼ + this[ ' date'] + ', Type : ’ + this['type *]) 

$ii .addClass ("sightings"); 

$li .appendTo ( M #sight_list") ; fcuvrerrt 

bounds.extend(loc) ; ^ - - - La-t/Lonj value -to 

ouv bounds object 


map.fitBounds(bounds); 


})； 


Till 七 he map -feo use ouv- bounds 
"to zoom -feo "the do\rvcd-t level 

so wc sec ihem all. 
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$('#ddlTypes').change(function() { 

if ($ (this) .val() !="") 

clearOverlays(); 



wc y*t d 3 *t 3 "to 
add markers -to map 
vcw'ovc sll old w\ 3 V"kcV*S. 


geiSi^IvtmgsByTypc ( 

} 

}); 

function dlcarOvcrlaysO { 

if (markersArray) { 


$(this) .val()); 



ih e value of ihc 

^^op-dowh lisi as a 

P 扣如 “ 叱 4^ ioh . 


for (i in markersArray) { 

markersArray[i].setMap(null) 


markersArray.length = 0 ; 


Remove tV^c Marker 


bounds = null; 

bounds — new ^^jl^^f^LatLngBounds () ; ^ Reset，-ihc bouhds 

liable -too. 


maps.js 




Gee| B 形 


We’ve included a function called clearOverlays that 
will remove the previously added markers before adding 
the new ones. Google refers to anything added to a base 
map as an overlay, which can be a Marker, a Line, a 
Polyline, a Polygon, or many other types of objects. 
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test drive 


Dwi/e 


Update your maps.js file with the new code you just created. Then, open up display_type.html 
in your browser and select some creatures from the list. 



◦ View Cryptid Sightings 

r C O thinkjquery.com/chapterll/step5/display_type.html 


Chupacabras 


National Forest 




i. Wi\V\ lljy liuiMi'k list is chdhgcd, gc*t d list creatures -Prona database *Ll>dL ^oildli llit 七 


7 ^* 



午 . Bo*tK lis 七 dhd map pom-ters should be dlidkdble so users ddh yt more ih-fo\rir«a*tior\ ov\ *thc map *to 

pop up. 
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So close...just one more item to go! 




































jquery and APIs 





You already know how to make things clickable with jQuery. How will this 
help complete the final requirement on the list? 


tJiereiare no ^ 

Dumb Questi9ns 


So, is the Google Maps API free for 
me to use on my website? 

Yes! Google makes the API freely 
available to everyone who wants to use 
it—personal or commercial—as long as they 
comply with the Terms of Service. 

I don’t know if I comply or not. 
Where can I see the Terms of Service? 

Simply browse to http://www.google. 
com/apis/maps/terms.html to view the full 
Terms of Service. 

Does the Google Maps API cover 
the whole world? 

Not quite, but it’s close. There are only 
a few countries that are not covered. Check 
out the Google Maps API site to find the list. 

Can I show maps on a mobile 
device, using the Google Maps API? 

Yes, you can. At the time of publishing, 
version 3 of the Google Maps API has been 
released. It has been developed to cater to 
mobile devices with browsers capable of 
running JavaScript. 


But I’d rather write an app for that. 
Is the Google Maps API for me? 

If you’re writing for the Android or 
iPhone platforms, then yes. Google provides 
specific frameworks for both of these 
platforms for you to include in your app. If 
you’re writing for another mobile platform, 
there is no specific framework yet, so you’ll 
have to use the same as on your website. 

The full version of Google Maps 
lets me get directions. Can this API do 
that? 

No, you cannot do that with this API. 
There is another API produced by Google, 
called the Google Directions API, that you 
can use to find the directions. 

What about finding places on a 
map by address? 

In the business, they call this 
geocoding. Google has yet another API to 
do that: the Geocoding API. These are all 
part of the Google Maps API family. Also, 
luckily for you, whenever you request data 
from Google, it will return JSON data to you, 
which you already know how to handle! 


What else is in the Google Maps 
API family? 

Both the Directions and Geocoding 
APIs belong to a subsection called the Maps 
API Web Service. Also in that sub-section 
are the Distance API, the Elevation API, and 
the Places API. 

There’s even more? 

Yup. There's also the Static Maps 
API for browsers that don’t fully support 
JavaScript; Maps API for Flash; and even 
an Earth API, which lets you load a Google 
Earth viewer into your page to get 3D 
images of the globe, as well as take virtual 
tours and draw shapes over the terrain. This 
one requires the Google Earth plug-in to be 
installed too, though. 

So JavaScript aside, can I get APIs 
for any other languages? 

Yes! There are countless numbers 
of APIs available—some free, some that 
require licensing. Chances are, if you’re 
looking for a specific piece of functionality 
you don’t want to write, there’s probably an 
API for it somewhere. 
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back to clicking again 


Listening for map events 


We’re almost at the end here, and by now you’ve seen a whole variety of events that 
j Query and JavaScript provide for making fun, interactive web apps. Since the Google 
Maps API is just JavaScript (albeit very well written and efficient JavaScript), it too can 
utilize the browser’s ability to listen for events and act accordingly. 


And for the same reasons that j Query added its own event listener creation functions, 
the folks on the Google Maps end of things have provided the capability to add event 
listeners through the API. This is because not all browsers deal with event listeners in 
the same way, so this ensures that the API can control how the listeners are added to 
the page. Let’s have a look at adding an event listener for the click event to create a 
Google Maps pop up (also called an Info Window ) : 

Dc-Pi^c a vairiable 
>wi*th the v/c 

would like b> show. 

var contentstring = "This is an InfoWindow” ,• 



r 

Create ah 

})； 

google /Waps 
l^ol/Vihdov/ 




var my lnrowmaow = ne\ 

content : contentstring 


Sci the value o( the dohtch-t 

pv-opevty the (h-folVihdow obje^i ^ __ . 

.event.addListener(my_marker, f click *, function () 


Tell i\\t map -to listen out -fov- a 
c\\ck cvcir\*t OY\ OUV- mavkcv- object 


google. maps 

infowindow.open(map,my_marker); 


my 


}) 



Gee | 


tWis Codt 

w avkcv is disked 3 

Y/mdov/ oy. ma 卜. 


In the Google Maps API, almost all the different object types 
(Map, Marker, Line, InfoWindow, TrafficOverlay, Polygon, 

and more) have events associated with them. However, even if 
the events for the different objects have the same event name, 
they may take different parametersl Be sure to check the 
documentation for the object you want to use. 
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%|harpen your pencil 

Fill in the missir 


missing pieces of code to complete the getSightingsByType function, which 
will add the click functionality to both the markers on the map and the items on the list. Also, 
create a global variable called info window, which will be a new instance of the Google 
Maps 工 nf oWindow object with the default content set to an empty string. 


var info—window = new google . maps_({content: * * })； 

function_(type) { 

$ . get JSON ( "_ action=getSightingsByType&type= M +type f function (j son) { 

if (j son.sightings.length > 0) { 

$ (’ #sight—list ’ ） •empty(); 

$.each(j son.sightings,function () { 

var info = 'Distance : 1 + this[_] + 1 <br>' + 1 Height : 1 + this['height 1 ]; 

info += ', Weight : ' + this[* weight'] + ', Color : ' + this['color'] + '<br>'; 

info += 'Latitude : ▼ + this[*lat'] + ▼, Longitude : ▼ + this[_]; 

var loc = new _(this [ ' lat * ] , this [ ' long ']); 

var opts — { 


map : map, 

position:_ 

}； 

var marker = new google.maps _ (opts); 

markersArray.push(marker); 

google .maps . event_(marker, ’click’，function () { 

info—window•content = info; 
info—window•open(map, marker); 

})； 

var $li = $ ( "<li / >"); 

$li.html('Date : ' + this['date'] + ', Type : ' + this[’type▼]); 

$li.addClass("sightings"); 

$li_(function () { 

info—window•content = info; 

info—window•open(map, _); 

})； 

$li.appendTo( n #sight_list"); 

_ extend(loc); 

})； 

map _ (bounds); 



maps.js 
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sharpen solution 



You’ve now updated the getSightingsByType function to display 
in list format and on the map, along with making the map markers 
and the list clickable. 


var info_window = new google.maps ({content : ''})； 

function ^rtSi^Ivtm^sByTypc (type) { 

$ • get JSON ( " action=getSightingsByType&type="+type, function (j son) { 

if (j son.sightings.length > 0) { 

$(▼#sight 一 list ’ ） •empty(); 

$.each(j son.sightings , function () { 

var info = ' Distance : * + this [ ]+ ' <br> * + ' Height : ' + this [ ' height']; 


info += 
info += 
var loc 
var opts 


' , Weight : * + this['weight *] + ', Color : 

'Latitude : ' + this['lat'] + ', Longitude : 

=new (this [ ' lat ， ] , this [ ' long']); 


+ this['color' 
+ this [ W |or\^ ] 


<br> 


map : map, 
position : \oC 


var marker = new google . maps ./\/lavkc\r (opts) 
markersArray.push(marker); 

google .maps . event •dddL.is'bchCV (marker f ’click’, function () 


Sv\ lis-tcncv- *to 
Mav-kc\r, oy\ map, 
-fov- d'idk event 


info—window•content = info; 
info_window•open(map, marker); 
})； 


var $li = $("<li / >"); 

$li.html('Date : ' + this['date'] 

$li.addClass("sightings"); 

$li .dlidk (function () { - 

info_window.content = info; 
info—window• open (map, mavkcV ") ； 
}) ； 


' , Type : ' + this['type']) 


Wo^，dow o, -the 


$li.appendTo( n #sight—list"); 
bounds* extend (loc); 


})； 

map .-fitBouhds .(bounds); 



maps.js 
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Tesr DriVq - 

Update your maps.js file with the new code you created on the previous page. Then, 
open up display—type.html’m your browser and select a creature from the list. Click on the 
markers or the list to view more information about the creature. 



◦ View Cryptid Sightings 


View Cryptid Sightings 


Sasquatch 


Satellite 


Date: 1967-10-20 
Type: Sasquatch 


Distance 90 


Height: 1 0, Weight: 1595, Color: #994114 
Latitude: 45.521 47, Longitude: -122.62603 


Type: Sasquatch 


GO thinkjquery.com/chapterll/step6/display_type.html 


"H A 1 I , … iu* lic4 - rS- fhc r 1 ^! ill 111 I J )4" [M illll 1^ 

’ IAZL •从 dvTTf Hi> _ liil ii rliinjni grin liif nf rurnhinn i nn (In [ hi iln I fliiif- niiilrh Ihr 4yft 

] rii'plny nil +hr m mul ^»ul un I in n..iy. 

BuLll Lilt liJ>L cIHlJ Lhc ^6lh*tc\rs should be dlidkdbl^ 
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yoi/Ve a jquery rockstar 


You did it! 

In just a few short pages, you managed to put together a fully functional 
website, using code from several different languages — PHP, SQL, 
JavaScript, and j Query 一 as well as pairing up the the Google Maps API 
with Ajax and JSON to display some pretty complex data. No small feat! 
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jquery and APIs 




APIcross 


It’s time to sit back and give your left brain 
something to do. It’s your standard crossword; 
all of the solution words are from this chapter. 



Across 

1. The code for a Google Maps API constructor that 
lets you put a point on a Google Map: google.maps : 

new google . maps ._(). 

2. The Google Maps API we used in Chapter 11 is written in this 
language. 

7. Once you have an instance of an API object, you can use all 

the properties and_associated with those objects in 

your code. 

8. API = Application Programming_. 

9. We used this jQuery method to get data from the sightings 
database using JSON and PHP. 

10. Google Maps API object that has the following properties: 

zoom,center, and mapTypeld. 


Down 

1. To include the GoogleMapsAPI in your web page, use this 

script tag: <script src="http : //_._._maps/ 

api/js?sensor=false"></script〉. 

3. Google Maps API method that listens for a click event on a 

marker: google . maps . event._. 

4. The jQuery event listener you used in this chapter. When the 
value of data in a field changes, this listener is triggered. 

5. An API is a series of object_, allowing you to 

create your own instances of the API provider’s objects. 

6. The Google Maps API object constructor that lets you pass the 
latitude and longitude as a parameter. 
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jquery and APIs 


Your jftuery API Toolbox 

You've got Chapter 11 under 
your belt and now you’ve 
learned how to pull together 
jQuery with APIs (plus JavaScript, 
PHP ， MySQL ， Ajax, JSON，and more!). 
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hope to see you again soon 


Leaving toww... 



Ifs been great having you m jftuGryville! 


We’re sad to see you leave, but now that you have all the skills 

you need to build your own cool jQuery-powered websites, we’re sure you’d rather be 
doing that than hanging around here. It’s been great showing you around the world of 
jQuery. Feel free to drop us a line or tell us about your cool new site at the Head First Labs: 
http://headfirstlabs. com. 
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參 The Top Ten Things ♦ 

(we 卜 didn’t cover) 



Even after all that, there’s still plenty we didn’t get 

around to. There are lots of other jQuery and JavaScript goodies we 
didn’t manage to squeeze into the book. It would be unfair not to tell you 
about them, so you can be more prepared for any other facet of jQuery you 
might encounter on your travels. 
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every single thing 


# 1. Every single thing m the JQuery library 

You probably realize by now that jQuery is a massive library. We tried to cover the 
main stuff that a person new to j Query would need. You are now armed with all of this 
knowledge so you can go and check the rest of the library out. 

jQuery methods 


• add () 

.addClass() 

.after () 
jQuery.aj ax() 

.aj axComplete() 

.ajaxError() 
jQuery.ajaxPrefilter() 
.ajaxSend() 
jQuery.ajaxSetup() 

.ajaxStart() 

.ajaxStop () 

• ajaxSuccess () 

.andSelf() 

.animate() 

.append() 

.appendTo() 

.attr() 

.before () 

• bind () 

.blur () 

jQuery.browser 
.change () 

.children() 

.clearQueue () 

.click () 

.clone () 

.closest () 
jQuery.contains() 

.contents () 

.context 
.css () 

jQuery.cssHooks 
.data() 

jQuery.data () 

.dblclick () 
deferred.always() 
deferred.done() 


deferred.fail() 
deferred.isRej ected() 
deferred.isResolved() 
deferred.pipe() 
deferred.promise() 
deferred.reject() 
deferred.rej ectWith() 
deferred.resolve() 
deferred.resolveWith() 
deferred.then() 

.delay() 

.delegate() 

.dequeue() 
jQuery.dequeue() 

.detach() 

.die () 

jQuery.each () 

.each() 

• empty() 

.end() 

• eq () 

.error() 
jQuery.error 


event.target 
event.timeStamp 
event.type 
event.which 
jQuery.extend() 

.fadeln() 

.fadeOut() 

.fadeTo() 

.fadeToggle() 

.filter() 

.find() 

.first() 

.focus() 

.focusin() 

.focusout() 
jQuery.fx.interval 
jQuery.fx.off 
jQuery.get() 

.get () 

jQuery.getJSON() 
jQuery.getScript() 
jQuery.globalEval() 
jQuery.grep() 

.has() 

.hasClass() 
jQuery.hasData() 

.height() 

.hide() 

jQuery.holdReady() 

.hover() 

.html() 

jQuery.inArray() 

.index() 

.innerHeight() 

.innerWidth() 

.insertAfter() 

.insertBefore() 


event.currentTarget 
event.data 

event.isDefaultPrevented() 
event. 

isImmediatePropagationStopped() 

event.isPropagationStopped() 

event.namespace 

event.pageX 

event.pageY 

event.preventDefault() 

event.relatedTarget 

event.result 

event.stopImmediatePropagation() 
event.stopPropagation() 
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# 1. Every single thing m the JQuery library (continued) 


jQuery methods (continued) 


.is () 

jQuery.isArray() 
jQuery.isEmptyObj ect() 
jQuery.isFunction() 
jQuery.isPlainObject() 
jQuery.isWindow() 
jQuery.isXMLDoc() 
jQuery () 

.jquery 
.keydown() 

.keypress() 

.keyup() 

.last () 

.length 
.live() 

.load() 

.load() 

jQuery.makeArray() 

.map() 

jQuery.map () 
jQuery.merge () 
.mousedown() 

.mouseenter() 
.mouseleave() 

.mousemove() 

.mouseout() 

.mouseover() 

.mouseup() 

.next() 

.nextAll() 

.nextUntil() 
jQuery.noConflict() 
jQuery.noop() 

.not () 

jQuery.now() 

.offset() 

.offsetParent () 

.one() 

.outerHeight() 

.outerWidth() 


jQuery.param() 

.parent() 

.parents() 

.parentsUntil() 
jQuery.parseJSON 
jQuery.parseXML() 

.position() 
jQuery.post() 

.prepend() 

.prependTo() 

.prev() 

.prevAll() 

.prevUntil() 

.promise() 

.prop() 

jQuery.proxy() 

.pushStack() 

.queue() 
jQuery.queue() 

.ready() 

.remove() 

.removeAttr() 

.removeClass() 

.removeData() 
jQuery.removeData() 
.removeProp() 

.replaceAll() 

.replaceWith() 

.resize () 

.scroll () 

.scrollLeft () 

.scrollTop () 

.select () 

.serialize () 

.serializeArray() 

.show() 

.siblings () 

.size () 

.slice() 

.slideDown() 


.slideToggle() 

.slideUp() 

.stop () 
jQuery.sub() 

.submit() 
j Query.support 
.text () 

.toArray() 

.toggle() 

.toggle() 

.toggleClass() 

.trigger() 

.triggerHandler() 
jQuery.trim() 
jQuery.type() 

.unbind() 

.undelegate() 
jQuery.unique() 

.unload() 

.unwrap() 

.val() 

jQuery.when() 

.width() 

.wrap() 

.wrapAll() 

.wraplnner() 
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# 1. Every single thing m the JQuery library (continued) 

jQuery selectors 


All Selector ( M * M ) 

Attribute Contains Prefix Selector 
[name|= M value M ] 

Attribute Contains Selector [name*= M value"] 
Attribute Contains Word Selector [name~= M value M ] 
Attribute Ends With Selector [name$= M value"] 
Attribute Equals Selector [name= M value M ] 
Attribute Not Equal Selector [name!= M value"] 
Attribute Starts With Selector [name A=M value"] 

: animated Selector 
: button Selector 
: checkbox Selector 
: checked Selector 

Child Selector ("parent > child") 

Class Selector ( M .class") 

: contains () Selector 

Descendant Selector ("ancestor descendant") 

: disabled Selector 

Element Selector ("element") 

: empty Selector 
: enabled Selector 
: eq() Selector 
: even Selector 
: file Selector 
: first-child Selector 
: first Selector 
: focus selector 
: gt() Selector 


Has Attribute Selector [name] 

: has() Selector 
: header Selector 
: hidden Selector 
ID Selector ( M #id M ) 

: image Selector 
: input Selector 
: last-child Selector 
: last Selector 
:It () Selector 

Multiple Attribute Selector [name="value"] 
[name2 = M value2 M ] 

Multiple Selector (’’selectorl, selector2 r 
selectorN") 

Next Adjacent Selector ("prev + next") 

Next Siblings Selector ("prev ~ siblings M ) 
: not() Selector 
: nth-child() Selector 
: odd Selector 
: only-child Selector 
: parent Selector 
: password Selector 
: radio Selector 
: reset Selector 
: selected Selector 
: submit Selector 
: text Selector 
: visible Selector 
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jftuery CPNs 

CDJVs (content delivery networks, oy content distribution networks) are large networks of servers, designed to 
store and deliver information — data, software, API code, media files or videos, etc. — making it easily 
accessible on the Web. Each server in the node contains a copy of the data that is being served out. 
When these nodes are strategically placed around a network — like the Internet — they can increase 
the speed of information delivery to many more people consuming this data. Windows Azure and 
Amazon GloudFront are examples of traditional GDNs. 

A number of large enterprises provide hosted copies of jQuery on GDN networks that are available 
for public use. Below are links to the GDN-hosted copies of j Query that you may hotlink to. 


① Google Ajax API CDN 

http:/ / ajax.googleapis.com/ajax/ libs /j query /1.6.2 /jquery. min.js 



① Microsoft CDN 



http:/ / ajax.aspnetcdn.com/ ajax /j Query /jquery-1.6.2. min.js 


① jQuery CDN (via Media Temple) 



http:/ / code.jquery. com /jquery-1.6.2.min.js (Minified version) 



http:/ / code.jquery. com /jquery-1.6.2.js (Source version) 


You can include these in your j Query applications instead of downloading j Query every time. 
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noConflict method 


The jClucry namespace: woCowflict method 

Many JavaScript libraries use S as a function or variable name, just as j Query does. In jQjLiery’s case, 

S is just an alias for j Query, so all functionality is available without using 5. If we need to use another 
JavaScript library alongside j Query, we can return control of S back to the other library with a call to 
$ . noConflict: 

<script type="text/j avascript" src="other_lib.j s"></script> 

<script type="text/j avascript" src= n j query.j s n ></script> 

<script type=" text/j avascript’▼> 

$.noConflict (); 

//Code that uses other libraries $ can follow here. 

</script> 

This technique is especially effective in conjunction with the . ready method’s ability to alias 
the j Query object, as within a callback passed to . ready we can use S if we wish without fear of 
conflicts later: 

<script type="text/j avascript" src= M other_lib.j s"></script> 

<script type="text/j avascript" src= M j query.j s"></script> 

<script type="text/javascript"> 

$.noConflict(); 

j Query(document) .ready(function($) { 

// Code that uses j Query's $ can follow here. 

})； 

// Code that uses other libraries $ can follow here. 

</script> 

You’ll only need to use this if you plan to use other JavaScript libraries that use the S as a reference. You 
will not need this if you are only using j Query on your page. Even if you include several plug-ins, you will 
not need this. 
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# 4. Pebugging your jClucry code 

It is always useful to debug your code — especially if you’re working on a large-scale project, with 
many different types of objects, includes, or APIs. Oftentimes, you’ll need to know the content of an 
object or variable sent back to you, but don’t want to alert it out, or figure out how to get at all the 
properties of an object. 

Enter some debugging plug-ins. These can help you look inside your objects so you can see when 
their properties change values, or track the changes of a variable over time. You can also see how it 
evolves throughout your application, or if it ever gets null values unintentionally. This can be very 
useful when you’re troubleshooting JavaScript or j Query code. 

Two of the debugging plug-ins we’ve found useful when coding in JavaScript and j Query are Dump 
and VariableD ebugger. 

http:/ /plugins.j query, com /project/ Dump (For seeing what your object contains.) 
http:/ /plugins.j query, com /project/ VariableD ebugger (Similar, but displays info in pop up.) 

There are several others, and there will be more and more over time, as well as improvements to 
these. We found these useful, but to look for some more that you might like better, go to the j Query 
Plug-ins site {http:/ /plugins.j query, com /) and search for “debug.” 

Of course, for everything else, there’s always the browser tools we’ve been using throughout the 
book. 
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Advanced animation: queues 

Queues in jQuery are mostly used for animations. You can use them for any purpose you like. 

They are an array of functions stored on a per-element basis ， using j Query. data. They are 
first-in-first-out (FIFO). You can add a function to the queue by calling . queue, and you remove 
(by calling) the functions using . dequeue. 

Every element can have one to many queues of functions attached to it by j Query. In most 
applications, only one queue (called fit) is used. Queues allow a sequence of actions to be called 
on an element asynchronously, without halting program execution. The typical example of this is 
calling multiple animation methods on an element. For example: 

$(▼#my_element').slideUp().fadeln(); 

When this statement is executed, the element begins its sliding animation immediately, but the fading 
transition is placed on the fx queue to be called only once the sliding transition is complete. 

The . queue method allows us to directly manipulate this queue of functions. Galling . queue 
with a callback is particularly useful; it allows us to place a new function at the end of the queue. 

This feature is similar to providing a callback function with an animation method, but does not require 
the callback to be given at the time the animation is performed. 

$(▼#my_element').slideUp(); 

$(▼#my_element').queue(function() { 

alert('Animation complete.'); 

$ (this) .dequeue(); 

})； 

This is equivalent to: 

$(▼#my_element').slideUp(function() { 

alert('Animation complete.'); 

})； 

Note that when adding a function with . queue, we should ensure that . dequeue is eventually called 
so that the next function in line executes. 

In j Query 1.4, the function that’s called is passed in another function, as the first argument, that when 
called automatically dequeues the next item and keeps the queue moving. You would use it like so: 

$("#test").queue(function(next) { 

// Do some stuff.•• 
next (); 

})； 

The default queue in j Query is fx. It is used by . animate and all functions that call it by default. 

NOTE: If you are using a custom queue, you must manually . dequeue the functions — they will not 
autostart like the default fx queue! 
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# 6. Form validation 

One very important feature we didn’t have room for is form validation, on the client/browser 
side, using jQuery. In Chapters 9, 10, and 1 1， we saw a small piece of server-side validation, using 
PHP, before our data was inserted into our databases. This is also very important, and strongly advised. 
A malformed insert or select statement to your database could end up revealing much more 
about your data than you intended. 

But back to the client-side validation … 

There are many j Query plug-ins dedicated to form validation. One of our favorites is the aptly named 
“validation” plug-in, found here: http:/ / docs.jquery.com/Plugins/validation. 

This plug-in will allow you to create a series of rules for each element on your form, so you can 
customize the validation, and refine the data you want to accept in your form. This includes 
everything from minimum or maximum field lengths, check for required fields, check if a valid 
email address is entered, and more. Here’s some examples from the j Query website: 

Specifies a name element as required and an email element as required (using the shortcutfor a single rule) and a valid 
email address (using another object literal). 

$(".selector") .validate ({ 
rules : { 

// simple rule, converted to {required:true} 
name : "required", 

// compound rule 
email : { 

required : true, 
email : true 

} 

} 

})； 

Adds required and ^minlength of 2 to an element and specifies custom messages for both. 

$ (’▼ #myinput’▼) • rules (’ ▼add n , { 

required : true , 
minlength : 2, 
messages : { 

required : "Required input", 

minlength : j Query.format("Please, at least {0} characters 
are necessary") 

} 

})； 
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# 7. jftuery U1 effects 


The jQuery UI Effects library comes with some extra animations, not available in the regular jQuery 
library. These can be broken down into three separate types of functionality: 



Color animations 

Color animations extend the animate function to be able to animate colors as well. It’s heavily 
used by the class transition feature, and it’s able to color-animate the following properties: 


backgroundColor 

borderBottomColor 

borderLeftColor 

borderRightColor 

borderTopColor 

color 

outlineColor 



Class transitions 

Glass transitions extend the base class API to be able to animate between two different classes. 
The following j Query methods are modified by j Query UI to accept three additional parameters: 
speed, easing (optional), and callback. 


addClass(class) 

Adds the specified class(es) to each set of matched elements. 
removeClass(class) 

Removes all or the specified class(es) from the set of matched elements. 
toggleClass(class) 

Adds the specified class if it is not present; removes the specified class if it is present. 
switchClass(currentClass, newClass) 

Allows you to visually transition from one class to another. 



Advanced easing 

Advanced easing is included in the Effects core, and is a j Query port of the easing functions 
written by Robert Penners, which were originally written in Action Script for Flash. They are a 
series of mathematical equations designed to make the animation of objects smoother and more 
accurate. Here’s a list of all the easing functions: 


linear 

swing 

jswing 

easelnQuad 

easeOutQuad 

easelnOutQuad 

easelnCubic 

easeOutCubic 

easelnOutCubic 


easelnQuart 

easeOutQuart 

easelnOutQuart 

easelnQuint 

easeOutQuint 

easelnOutQuint 

easelnSine 

easeOutSine 

easelnOutSine 


easelnExpo 

easeOutExpo 

easelnOutExpo 

easelnCirc 

easeOutCirc 

easelnOutCirc 

easelnElastic 

easeOutElastic 

easelnOutElastic 


edselnBdck 

easeOutBack 

easelnOutBdck 

easelnBounce 

easeOutBounce 

easelnOutBounce 
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# 8. Creating your oww jClucry plug-ins 


Extending jQuery with plug-ins and methods is very powerful and can save you and your peers a lot 
of development time by abstracting your most clever functions into plug-ins. 

Rather than writing a whole bunch of text about how to create a j Query plug-in, we think it’s best left to 
the experts over at j Query. They have a very substantial and informative tutorial here: http://docsjquery.com/ 
Plugins /Authoring. 

Here’s a brief summary of what to keep in mind when developing your next j Query plug-in: 



Always wrap your plug-in in (function ( $ ) { / / plugin goes here }) ( j Query );. 

Don’t redundantly wrap the this keyword in the immediate scope of your plug-in’s function. 

Unless you’re returning an intrinsic value from your plug-in, always have your plug-in’s 
function return the this keyword to maintain chainability. 



Rather than requiring a lengthy amount of arguments, pass your plug-in settings in an 
object literal that can be extended over the plug-in’s defaults. 



Don’t clutter the j Query. f n object with more than one namespace per plug-in. 



Always namespace your methods, events, and data. 


j Query. fn is pronounced u jQuery effln.” 
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# 9. Advanced JavaScript: closures 


Closures are a very complex topic within JavaScript, and were quite close to making it into 
the book proper. Although they didn’t, we feel strongly about you needing to know about them, 
so we wanted to mention them here. 

Closures are not hard to understand once you grasp the core concept. However, if you read 
some of the more detailed, technical descriptions, you might get very confused. 

First, a definition (or two): 



A closure is the local variable for a function, kept alive after the 
function has returned. 


O Whenever you see the function keyword within another function, the 
inner function has access to variables in the outer function. 

Crazy, right? 

Closures fully rely on the scope of variables and objects. The scope refers to where objects, 
variables, and functions are created and accessible, and in what context they are being called. 
Basically, objects, variables, and functions can be defined in either a local or global scope. 

Local scope: The local scope is when something is defined and accessible only in a certain 
part of the code, like inside a function. 

Global scope: As opposed to the local scope, when something is global is accessible from 
anywhere in your code. 

Consider the following code: 

function fund (x) { 


var tmp = 3; 
function func2(y) { 


alert(x + y + (++tmp)); 


func2(10); 


fund (2 ); 
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{ 

(++tmp)); 


func2 is now a closure. 


Now consider: 

function fund (x) { 

var tmp = 3; 
return function 
alert(x + 

} 

} 

var func2 = fund (2 ); 
func2(10); 


Again, tmp is m the local scope, but the func2 function is m the global scope. The above 
function will also alert 16, because func2 can still refer to x and tmp, even though it is no 
longer directly inside the scope. 

However, since tmp is still hanging around inside func2 , s closure, it is also being incremented. 
It will be incremented each time you call f unc2. 

It is possible to create more than one closure function, either by returning a list of them or by 
setting them to global variables. All of these will refer to the same x and the same tmp; they 
don’t make their own copies. 


# 10. Templates 

jQuery templates are still in beta, but are a cool, upcoming feature that might help you build 
a more flexible site, without much HTML or j Query. They are designed to take data and 
bind it to some template markup, so you can consistently use the same markup to display 
similarly related data. 

Check them out here: http://api.jquery.com/category/plugins/templates/. 


# 9. Advanced JavaScript: closures (continued) 

The tmp variable is declared in local scope, inside the fund function. This will always alert 
16, because func2 can access the x (which was defined as an argument to fund), and it can 
also access tmp from fund. 

That is not a closure. A closure is when you return the inner function. The inner function will 
close over the variables of fund before leaving. 
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appendix ii ： set up a development environment 



You need a place to practice your newfound PHP skills 
without making your data vulnerable on the Web. its 

always a good idea to have a safe place to develop your PHP application 
before unleashing it on the world (wide web). This appendix contains 
instructions for installing a web server, MySQL, and PHP to give you a safe 
place to work and practice. 
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installing php & mysql locally 


Create a PHP development cwvirowmcwt 


Before you can put your finished application on the Web with your 
newfound jQuery and AJAX skills, you need to develop it. And it’s never 
a good idea to develop your web application on the Web where everyone 

can see it. You can install software locally that lets you build and 
test your application before you put it online. 

There are three pieces of software you’ll need on your local computer to 
build and test PHP and MySQL applications: 

1. A web server 

2. PHP 


3. A MySQL database server 


PHP isn’t a server; it’s a set of rules that your web server understands 
that allow it to interpret PHP code. Both the web server and the MySQL 
server are executable programs that run on a computer. 


Keep in mind that we’re talking about setting up your local computer as 
a web server for PHP development. You’ll ultimately still need an online 
web server to upload your finished application to so that other people 


can access and use it. 

Web sevvev s\aCM as 

or I |S is vc<\ui\rcd *to 
sevve up PHP shifts as y/cb 
pays. 

T"hc MySdJL database 

sc\rvc\r is o-ftch ihsialled 
Oh "the sdrvtc 
as the web sc\rvcv- 
so-p-twairc—ih this tasc, 
yoi»\r lo 乙 al dorwpu'tcV"/ 


Server computer 



^W^^erve^ 
^Dat^as^erve^ 


d PHP 

youv- \ota\ 
as a scv-vcv- 
fo\r the fuv-poscs 

of mmmg PttP shifts. 

PHP is mstallcd as favt 
o( 七 he v/cb scv-vcv av\d 
allows i\\t web s^rvev 
*to VUK\ PttP stv'ifts- 


Find out what you have 

Before trying to install any of the pieces of the PHP development puzzle, 
your best bet is to first evaluate what you already have installed. Let’s take 
a look at the three pieces and how you can tell what’s already on your 
system. 

The platform of your local computer makes a big difference when it 
comes to what’s already installed. For example, Mac OS X has a web 
server installed by default, while most Windows computers do not. 


NOTE: This appendix 
covers Windows XP ， Vista, 
Windows 7 , and Windows 
Server 2003/2008. For Mac ， 
it applies to Mac OS X 
10.3.x or newer. 
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Vo you have a web server? 


You probably already have a web server if you are using a newer PC or 
Mac. To find out quickly on either system, open a brower window and 
type http: / /localhost in the address bar. If you get an introductory 
page, that means your web browser is alive and well on your local machine. 
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Currently, on 
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A_y •••!*• to cmhmcHH 

twrrrMly rr<r»vir> 5 ) »n Under Con»t 
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|-f you Kdve d i/V’mdov/s 

>wi*tK IIS, you wvigK*t 
see somC*tKm^ like 



W you have a Mac ov- IVihdows 
你 adhihe with -the Afddke web 
sc\rvc\r ihS"(^||cd； you see 
somethihg like this. 

Vo you have PHP? Which version? 

If you have a web server, you can check to see if you have PHP installed very easily, as well as which version you have. 
Create a new script named info.php and type this in it: 

<?php phpinfo (); ?> 

Save this file to the directory your web server uses. On Windows, it’s typically: 

C:\inetpub\wwwroot\ (for IIS) 


or: 

C:\Program Files (x86)\Apache Software Foundation\Apache2.2\htdocs (for Apache) 

On the Mac, it’s usually something like: 

/ Users/yourname/sites/ 

If you try to open this file in your browser by typing http : / /localhost/info . php, you’ll see something like 
this if you have PHP installed: 



Here’s version 
PttP you have ms-tailed- 
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checking your mysql version 


Vo you have MySQL? Which version? 

On Windows, you can tell by right-clicking on the Windows taskbar, selecting Task Manager, and 
selecting the Services tab. For more information, you can click the services button on Windows 7. 


Cascade windows 
Show windows stacked 
Show windows side by side 
Show the desktop 



Start Task Manager 

Lock the taskbar 
Properties 
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tteve s v/Kcv-c 
you II see 


To determine whether you have MySQL on the Mac, open your terminal and type: 
cd / user/local/mysql 

If the command works, you have MySQL installed. To check the version, type: 
mysql 


"The AlyS^L tcv-^ihal 

is also khov/h as -the 

MySdJL 


File Edit Window Help IHeartPHP 


l-P *tWs 

dommd 灼 d 

sutdccds, *l*t 
is 'ms'boilled- 


$ cd / usr/local/mysql 
$ mysql 

Welcome to the MySQL monitor. Commands end with ; or \g. 
Your MySQL connection id is 3 

Server version: 5.0.51b MySQL Community Server (GPL) 

Type 1 help; 1 or 1 for help. Type 1 \c r to clear the buffer 
mysql> // 


Weve’s 七 he vcv*sioK> 
o( /VlyS^L you - 

have mstallej. 
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set up a development environment 


Start with the web server 

Depending on the version of Windows you have, you can download Microsoft’s Internet 
Information Server (IIS), or the open source Apache web server. If you need a server on 
the Mac, you should probably go with Apache since it’s already installed. 

Here’s a brief overview of installing Apache on Windows: 


Head over to http:/ / httpd.apache.org/download.cgi. 


If you’re using Windows, we suggest you download the 
apache_2.2.19-win32-x86-no_ssl.msi file. This will automatically 
install Apache for you after you download and double-click it. 


〜 ab this vcv-sioh 
3hd double - 匕 |i 匕 k 
'"t a-Ptcv you ； vc 
dowhloadcd it. 一 



Next you’ll see the Installation Wizard. Most of 
the instructions are straightforward, and you can 
accept the default choices. 


HTTP 2*2 



you are here ► 
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installing php 


Apache mstallation...concluded 


You’re nearly finished. Click Install and wait a minute or so for 
the installation to complete. That’s it! 



^ Ap«cbc HTTP S«fw2J Wiz«rd 



Your web server is set to start automatically when you start up your computer. 
But you can control it using the Services panel by stopping and starting it in 

the Control Panel —► Administrative Tools —► Services dialogue, where 
it will now show up as Apache2.2. 

If these instuctions don’t work for you, try again, or type “Installing Apache on 
Windows” into your favorite search engine for more help. 



PHP iwstallatiow 


Go to http://www.php.net/downloads.php, or http://windows.php.net/download/, if you are using 
Windows. 

Just as with Apache, if you’re using Windows, we suggest you download the Windows installer 
version. If you’re using Apache, download the php-5.2.17 - Win32 - VC6-x86.msi file. If you’re 
using IIS, download the php-5.3.6 - Win32 - VC9-x86.msi file. This will automatically install PHP 
for you after you download and double-click it. 



version dov/irtlodd scdtio^. 


Which version do I 
choose? 

If you are us^ng PHP with 
ApjUie 1 of Ap^che2 liom 
apache.ocg you need to use the 
VC6 v«fbivns vt PHP 

If you irJng PHP with ITS 
you should the VC9 
vmforK of PHP 

VC6 Vvfbionb die compilvd with 
the legacy Visual Studio 6 
cvnipilvf 



VC9 versions are compiled wtth 
rh^ vkijaI ?>tudio ?ooh rompil^r 
and hav« improvements i 
performAnrf And «r<ibiliry. lhf 
VC9 versions require you t 
hflvp rh# Mifroaolt ?o< 
rth« I 


Read description o-f 
y/hidh vc\rsior\ you should 
download. 


Opening php-5.Z17-Win32-VC6-x86.rmi 

You have chosen to open 

0 php-5.2.17-Win32-VC6-x86.msi 

which is a: Windows Installer Package 
from: http://windows.php.net 

Would you like to save this file? 

Save File Cancel 


After you’ve downloaded the file, 
double-click it. Click the Run 
button to begin the installation. 
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set up a development environment 


?W iwstallatiow steps 


It starts with a basic setup. 


5217 S«tup 



Welconie to the PHP 5.2.17 Setup Wi/<ird 


TVe Sefce V^wrd *«4 ratal 紗 0" vo^r cw^/ttr 

Od(Nrirt» nntrutcr Canevt const W Srho Wnrtf^ 
W>1K dMUr «ny «vu» drtrcten >ofN»drf you n«y K*%r 
n^mQ d^rg 9 m rstilMon. 


■ 




Accept the License 
Agreement to continue. 


PHP 5^.17 Setup 

nd-Uwr Iitmm# AgrMmMit 

PWiM« rt*d the faia^ri^ kence tgrterrtnt cart^Jy 




Copyxig&C 
zeaezvea. 


Th* PHP Llc«n»* # vvralon 3.01 
l»»» - 2010 Tbe rnt Ssoup. All sig&ta 


•ouxcc *nd biDAxy 


fteaiBCxiisucion ar.d u 
wien or wit&out 

au-aincACi&r., i* pezmitced provided tb*t tb« 


Selecting the default installation 
folder is usually a good idea, but 
it depends on preference. Here, 
we choose C:\PHP. 


^jlPHP 5^17 Setup 



Be careful on this screen. If you’re using Apache, select the right 
version. If you’re using IIS, you will probably select the IIS API 
module. Check with your particular software to determine exactly 
what you need. Here, we’ve chosen Apache 2.2, and need to give the 
path to our Apache install in the next screen. 



/1/IyS^L. Clidk i\\t w £^*tivc -Pca*tuv-c w dhoidc. 


you are here ► 
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installing mysql on windows 


?W mstallation steps...concluded 


That’s it. Click on Install and then Done to close the installer. 






If you haven’t done so already, create a new script named info.php and type this in it: 



<?php phpinfo(); ?> 


Save this file to the directory your web server uses. On Windows, it’s typically: 
C:\inetpub\wwwroot\ (for IIS) 


or: 

C:\Progmm Files (x86)\Apache Software Foundation\Apache2.2\htdocs (for Apache) 


H tkese instuctions cion’t 


On the Mac, it’s usually something like: 

/ Users/your name/ sites/ 

If you try to open this file in your browser by typing 

http : //localhost/info.php, 

you’ll see something like this if you have PHP installed: 


Installing MySQL 



work lor you, try again, 

or type ” installing PHP 
for Apacke [or IIS] on 
Winctows” into your favorite 
searck engine for more kelp. 


Instructions and troubleshooting 


You still need MySQL, so let’s work through downloading and installing it. The official name for the 
free version of the MySQL RDBMS server these days is MySQL Community Server. 


The following is a list of steps for installing MySQL on Windows and Mac OS X. This is not meant to 
replace the excellent instructions found on the MySQL website, and we strongly encourage you to go 


there and read them! For much more detailed directions, as well as a troubleshooting guide, go here: 

M 咖 ‘ 〜叫 . 

http : //dev.mysql.com/doc/refman/5.5/en/windows-installation.html 


You’ll also like the MySQL query browser, where you can type your queries and see the results inside the 
software interface, rather than in a console window. 
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set up a development environment 


Steps to install MySQL on Windows 


Go to ： 

http:/ / dev.mysql.com/downloads/ 

and click on the MySQL Installer for Windows “Download the Beta” 

download button. (Note: It was “Beta” at the time of this writing.) 



Choose Microsoft Windows from the list. 


思 MySQI : Download My^QI tn^tallpr + 




Hi 8 http a y/dev.mysql.com/dowr\loads/install«r/ 


download mysql 


PI 


c ， 


MySQL! 


Sediii 雇 


a 

Login | Rcuisler 


Ttie world's most popular open source database 



MySQL Community Server 
MybQL cluster 

MySQI WolkliHiu h (GUT Tcinl) 
MySQL Proxy 
MySQL Connectors 
MySQL Installer (Windows) 


Download MySQL Installer 


MySQL Installer provides an easy to use r wizard-based 
Installation experience for all your MySQL software needs. 
TfiilutlH(i in IIih prinliict hip the IhIhsI veisinns nf: 

• MySQI Spivhi 

• All of ciiir siipixifl cuniiHiInis 

• Workbench and sample models 

• Sample databases 

• Documentation 


Please report any bugs or Inconsistencies you observe to our Bugs Database. 

Thunk you for your support! 


MySQL upen &uurte 
software is provided under 
the CPL License. 

OEMs, IS Vs and VARs con 
puidio^e curnnicfudl 
licenses. 


■ T r 




X 




k. 





V^u r^y have -fco s^v-oll 

doyN\r\ a little. 



you are here ► 
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installing mysql on windows (continued) 


Pownload your installer 

Choose Windows(x86 5 32-bit), MSI Installer from the list. 






：« 


vcv-sioh 

^ ^ OY hCWCV-. 


16 , 37 bM) ( a 


Window% (HS6, 17 bM), • 



The *to\> erne! 


o 


o 

o 


Click on No thanks，just take me to the downloads! unless you want 
to register for an account on the site, or already have one. 



Co 灼七 • 賊 亡 v/Vthou 七 


You’ll see a list of locations that have a copy you can download; 
choose the one closest to you. 


When the file has finished downloading, right-click on it and choose “Run as 
Administrator” to launch it, if you have Windows UAG enabled. At this point, you 
will be walked through the installation with the Setup Wizard. Click Next. 


MySQUftn*n«f 

J2\ whit ccy/pj— MySQt 







I^Vhch the Setup lVir^\rd di^lo^ 
^ the Ihstall /VlySfiL 

P^rodudts but-toh. 
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set up a development environment 


Pick a destination folder 



Read and agree to the license terms and and click Next. 


MySQL Instalkr 



License Agreement 


To install MySQL, you must accept the Oracle Software License Terms. 


CaNU (jbNbRAL MUUUL UCtNSt 
Veroon 2, June 1991 

Copynght (C) 1909, 1991 Tree Softcore V oondobon, Inc .； 
SlTronUh Street,「ifth Hoot, Dos ton, MA 02110-1301U5A 
Ever yune b (jeniillctJ lu mpy dinJ Jbtiixile veibdtvn cupin 
nf !hK Imw rionmwir, hiit dwtgmg ir k nnt Alnw^d. 

Preamble 


Ttic kerb» fur riKAl bufliv<vc <vc Jmuncd Lu UAc away vxm ficcdwn 
tn wid rtwnQ^lt. Ry mntr 抵 t, ttv GNIJ Pi Mr I itpov K 

nrpnflwl m giiaranip^ ymr frwloni tn ^harp ?n\ dw>g^ 
jftware—to make sure the software is free for al its users. I his 
Generai Pubfec bcence applies to most of the Free Software 
Foundation's software ond to any other progrom is4x>sc outhora commit to 
iq it. (Some other V rec Software 「 oundobon software is covered by 
: GNU UUdry Genctd Publk. Uu^ee iciledd.) Yuu oggly il lu 
ymr prograiiK, tno. 


»Vhen we £peak ot tree cottv 
Dur General Pubk Licences i 


we are referring to freedom, not pnee. 
Our General Pubk Licences are designed to make are that you have 
the freedom to dstribute copies of free software (and charge for this 
scrvxc if yxxj msh). that you reedve source code or con oet it if you 
wdiilil, UtdlruuLdiMjidiige tlic wflwdicui ube uicLCb il in new 
progr»rw; Anri that yni know you fan do thev thmo^. 


I I occcpt the kensc terms 


I Send anonymised nfb to MySOt to improve the instolcr product 


< B^ck 


Ncxt> 


Guitd 



The next step will run an automatic update to make sure there are no 
newer versions. You can skip this by selecting the Skip Check box, but it 
is good practice to make sure your applications are up to date. After the 
update is complete, click Next to continue. 



Find latest products 

B«for« the mstjlabon is performed, the Instiler wi ch«d( 4 there are newer 
versions of the products you are about to instal / already tnstaled are avaiable. 



O Conrwcl to lh» InfefmM 
O product wod*te nfont^oon 


Mtatlabon 

C^nri^MractOM 




Sop for iOd • 治⑼ reco>w««ided) 




Find latest products 

Before the mstslation ts p«rfom»«l. the Instaler wi ch«d( 4 there are n«wer 
versions of the products you are about to mstal / already tnstaled are available. 


^mdlMttlproduOs 



you are here ► 
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installing mysql on windows (continued) 




You’ll be asked to choose a setup type for your installation. For your 
purposes, the Developer Default will be perfect. Also, leave the 
installation paths as the default ones set for you already and click Next. 



Next, the installer will check your compatibility with the Microsoft .NET Framework 4 
Client Profile. This is to run the MySQL Workbench application. If you are missing this, 
update your Windows instance at http:/ / update, micro soft, com/. 





The next screen will list all the features to be installed. Click Execute to start 
the installation. 
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set up a development environment 


Installetion Progress 


After all the services show a successful installation, click Next to access the 
configuration options for the MySQL service. Choose Developer Machine 
and click Next. 






Make sure both the Enable TCP/IP Networking and Create Windows Service 

options are selected, and leave the default values in place. Enter a password for the root 
MySQL user into the boxes at the bottom and click Next. 


The installation should now be complete. If it doesn’t start up automatically, open the 
MySQL Workbench from the Start —► All Programs —► MySQL menu. 



i 




NtySOL Server Confkiuration 


»« bifcrm«l)e« 
I «tMt products 



spcofy the He (work. \ 
Enable TCP/IP NctwoMono 
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WMvkyMrs. and Security settmos 


HySQi Root P»s«word 
Krpe«t PMiwonl 


I V |^\ Welcorre to MySQL 
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Workbench 


国题极 ■ 园 B 


ML SQL Ocvolopmont 

k ar—m 
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Sorvor Administration 
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> HrwServtr Hstavcc 
m / tJVOft 
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you are here ► 
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installing mysql on mac os x 


Enabling ?W on Mac OS X 

PHP is included on Macs with OS X version 10.5+ (Leopard), but it’s not enabled 
by default. You have to access the main Apache configuration file and comment 
out a line of code in order to get PHP going. This file is called http.conj] and is 
hidden inside the Apache install folder. 

You’re looking for the following line of code, which has a pound symbol (#) in 
front of it to comment it out: 

#LoadModule php5_module libexec/apache2/libphp5.so 

You need to remove the pound symbol and restart the server to enable PHP. The 
http.conf document is owned by “root,” which means you’ll have to enter your 
password to change it. You’ll probably also want to tweak the php.ini file so that 
Apache uses it. For more detailed information about how to carry out these steps 
and enable PHP, visit http://foundatimphp.com/tutorials/php_leopard.php. 


Steps to install MySQL on Mac OS X 

If you are running Mac OS X server, a version of MySQL should already be 
installed. 

Before you begin, check to see if you already have a version installed. Go to 
Applications / Server/MySQL Manager to access it. 

❶ Go to ： 

http:/ / dev.mysql.com/ downloads/ 

and click on the MySQL Community Server link. 

For these instructions, we’re downloading the 32-bit version. Make sure you download 
the version relevant to your operating system. 
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set up a development environment 



Click on the Mac OS X vl0.6 (x86, 32-bit)，DMG Archive download 
button. 


X 

il.com/<lownk 


O 

-C rt O tfcv.mytql.com^downlMds/mysql/ 

» I 知 p<rtc ( »lypen< CC Q Splunk MctTods i Scrvcrlnfo t> Trac-WAS . Mkxt SB CopySenc* 
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TVi.nk you for your support! 


t UTOork i 

ibase. 


— Other Soofcmjrti 


G«n«rally Avallabla (GA) (Ul«»s*s 0«v»lopm*n« R«Imms 


MySQL Community Server 5.5.14 

Select Platform ： 

MtcOSX_3 


Looking for previous GA 
versions? 



Mac OS X v«r. 10.6 (x86, 32-blt) f 
Compr«ss«d TAR Archive 
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M«c OSX v«r. 10.6 (xM r 04-blt) f 



(mytqi'S.S-14 ot«l0ift - »66,6A tar.^r) 


Hac OSX wr. 10.5 (xM, 54-btt), 
DMG Archlv* 

(my«al-S.S. 14 - 00 ( 10 . 6 x 86 64 
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I i 


V<>u II have -to SO。" 
dov/h -to get -to it/ 





Click on No thanks, just take me to the downloads! unless you want to register for 
account on the site, or already have one. 



Contmuc y/rthou 七 




Click on a mirror that is nearest you, for faster downloads. 


0SmvSQI S«l«CI a Mirror to 

4 - C O dcv.mysql.com^i 

Myp«n< CC £| 


downkxads/mirr 

々 l^Tools i 
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You are downloading: 
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Mirrors in: United i 
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you are here ► 
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installing mysql on mac os x (continued) 


Pownload your installer 

o Return to ： 

http:/ / dev.mysql.com/ downloads/ 

and click on MySQL Workbench (GUI tool). 






C) KySQL GUI Toolft B 


Kmm r«po*1 cny bugs «r recn—t»nem you tt 

niaitk you for y«ur auppovtl 

Cvn^rally Avatlsbi* (GA) 

MySQL Workbench 5.2.34 


Looklr 

v«r»Hj 


Mac OS X (xM, 32-MI), t 




❶ W« 9u99tm thM you u«Ow HDS Oicctoums ar>d Gnu 


Click on No thanks，just take me to the downloads! unless you want 
to register for an account on the site, or already have one, and choose a 
mirror again. 


靄 • Mrigr « S»t ♦ 

♦ * fl K»/ m.n4 <c*<v^»» w o« a fc<»»»rou»p 


•If - fi 、 ‘,办 


UKMIRROR 


Returning Users 


Ne^ Users 

PrvtwHl miHh 






Coy\*t*muc 


o When both files have finished downloading, double-click on the mysql-5.5.14- 
osxl0.6-x86.dmg file to mount the installer and then double-click on the mysql- 
5.5.14-osxl0.6-x86.pkg file to start the package installer. 




mysql-5.5.14-osxl0.6-x86 


O 




4 ? A MR ^vAilnhle 


mysQl-5.5.14-osxlO.G- 

x86.pkg 


MySOL.p ref Pane MySOLitartupItem.pkg ReadMe.txt 



丁 he package ihs-tallcv- 
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set up a development environment 


Run the package installer 


o 


The package installer should start. Click Next to continue to the Read 
Me page, and Continue to get to the License page. 


wtv <<K Mac OS X 






GMU GCNERAL f 
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The next step will display this licensing information for MySQL. If you 
agree to the terms, click Continue ， and then Agree. Select Continue 
again to install it in the default location. 


♦ Install MySQL S.S.14 i 


jnity for Mac C>S X 


O Inti 
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• InstallKioi 
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and quit the Installer. 
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Save. 
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you are here 
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installing mysql on mac os x (continued) 



Click Install, enter the username and password of an admin 
user, and press OK to begin the installation. 


O Introducth 
O Read Me 

ti Uc«n%r 

O D€ttinaU( 
o Insiallation Type 

• In&tdlJKon^F 


I ln*.t.ill MySQl S.S.14 - community for Mac OS X 

Standard Install on “Macintosh HD" 


ctk>n V-\ 

•必 


ThK will Mko 415.? MB of on your 

computrr. 

Click I mull to perform a standard insUllalion of 
(hiI software on the disk "Macintosh HO*. 


Type your password to allow lnstmll«r to make 
changes. 


二 


Password . 


D«u*i> 


⑦ 


Cancel ) ( OK ) 


Changr In'Uill location 


(Co Ba^k ' 、 Install 


The installation should start, and give a success message when complete. 


It 


ln%lall MySQl S.S.14-community for Mac OS X 

Installing MySQL 5.5.14 community for Mac OS X 


kictk>n^0L 


t> Introduc 
© Read Me 
ti License 
Destination 
« InMAllailon Typ^ 
© In&ullation 


Running package scripts.. 



Co Back 


It 


I Install MySQL S.S.14 -community for Mac OS X 

The installation was completed successfully. 


t) lntroductton\ 

O Read Me 
H Ucvn&c / 
Dtstinailon 
« inMAllatlon Type 
tt In&ullation 
0 Summary 


o 


The installation was successful. 


The software w«i& initaJIcti. 


Col 


、 Close J 



Repeat the same steps for the MySQLStartupItem.pkg file. 




mysql-5.5.14-osxl0.6-x86 

4 ? R MR avAihhle 




mysQl-5.5.14-osxlO.G- 

x86.pkg 


—> 

MySOL.p ref Pane 



MySQLStartupItem.pkg 



ReadMe.txt 


丁 he package ihs-tallcv- 
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set up a development environment 


♦ Install MySQL Startup Item 

Welcome to the MySQL Startup Item Installer 




^ Install MySQL Startup Item 

Important Information 

2.4 10 ^staiirvg 外 SQL on Mac OS X 


You can install MySCXon MacCX3X 10-3J( (ParmeOOf newer using 

MncOft X binnry pikckngn in PKfi kirirml in»innd of Ihn binary tafbnll 
d»stnDu%on. Please r>oie mat otdef versions of Mac 05 X (for ex&mpt«. 



Th« parJtngo ii 
n««d» moun 

mount ?)• im^ge arxJ c 
To Amain MySQl, 


&y this package, 

irruigA (' Ma ifiAt you ftmt 
icon in V)« Finder, ft sf>ould then 


)f0(9 proceeding 
} MySQt svirvnr i 


wnft vm mstaiaiKK). M sure to snut down 
insrtnnons by nithnr using Ihn MySQL 


•NofieVB^ton 
nl running 
MfinAgftr 

Applicabon (on Mac 03 X Serveo or via mysqladnun sfiuioowrV on 

•m 

cnrTwnnnd linn 


To actually install me MySQL PKG f*e. oouDle<i»ci(oo vie package 

inru* TStar Jr»iMwrf*nn Ow» 44*14*1 V O^Milrr«nn^liw'lr»llf«r MiKinK^niiifinr 

Print.. Save... Co Back Continue 



Double-click on the MySQL.prefPane, also found in the mysql-5.5.14-osxl 0.6-x86.dmg, to 
install the MySQL Preference pane; then, click on Start MySQL Server. 


non 


mysql-5.5.14-osxl0.6-x86 


( — ^ 




> iiom^. 7 8 MR Jiv^iLihle 


cr 


mysQl-5.5.14-osxlO.G- 

x86.pkg 


MySOL.p ref Pane MySOLStartupItem.pkg 


ReadMe.txt 



The package ihs-bllcv- 
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installing mysql on mac os x (continued) 




Show All 


Th# 'MySQL* pan# mu<t b» intull*d b#for# 

you can use H. Do you want to iniUl it now? »f 

MKVince Dctkzoi l<ght 

* tf ***' 6 0 Imull for ftiit u%9f only 

lardwar* O for «ll »%*€% of thi« conriputor 

U ，办 

d>«ovd> o>pi« j—z - ^ —■— = —v »r«B S9un« 


Caned Imtall 


ln«*rn«t A Wlr«l««* — 


i 

Mo64»M» 

Mtaerk 

0 

•klMOOM 

Vunng 

System 


Otai* AT«n« 


C^j 

Software 

OfH*r 

衫 : 

Control C«rttw 

□ 

1 ftasM Flayer 

t 

Maerusc 


% & 

Time MactuA* UnivtruJ 




A O A 

MySQL 


^ ^ ^ ► *»how All 




MySQL ?vcrvrr Statu% 

The MySQL DjUba^c Scrv «， i» turrvmfy flopped. 

To stAri It. use (he *Sun MySQL Server* button. 

The MySQL Server Instance is stopped 

Start MySQL Server 


^ Automatiully SUrt MySQL Server on SUrtup 
You may l#<t to tuvr tht MyV)| vtottr itart 
auto«n«t><Allv MfKfttvcr your computer starts up. 

MysS^ 


MySQL 

( ，」 ► j Show All Q, 

MySQL ?U*rv»*r Stiltu% 

Tti« MySQL D4tdb4»c Serwr i» sUftvd 4nU rrMly fvr dlent ivnrvcUlofn. 

To shut the Server down, uie the *Siop MySQL Server* button. 

The MySQL Server Instance is 、 Stop MySQL S«rver 

If you %tnfi The wrvrr. y«u and ynur ajtftUeatinn^ vMlI nor 
be to um MyiQt and all current connections %wtli be dosed. 




2 Automatically SUrt MySQL Server on Startup 
You may tfl#<t to luvr the MyV|l trrv^f itart 
automabcally wf)«o«ver your computer starts up. 



MySQL 



Double-click on the mysql-workbench-gpl-5.2.34.osx-i686.dmg file that you also 
downloaded to start the installer for the MySQL Workbench tool. 




MySQL Workbench 




2 items, 69.9 MB aval I abl e 


O" 


My 


sql^ Workbench 


SQL Dfi^elopm&nt I Data Modeling | Seryer Admlnls-lra^tiim 



To instafl the applications drag the MySQL Workbench icon to your Applications foJder. 

You may then “Eject" and throw away this disk irrrage. 




Drag the MySQLWorkbench.app into your Applications folder. 
Open up the Workbench tool from your Applications list. 
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set up a development environment 


Using the Server Administration panel, ensure that your server is running. If the 
panel is empty, click the New Server Instance option and select your running server. 


A 

f Workbr«ch CcmraJ 


Wofifhrif h 


Welcome to MySQL Workbench 

♦ WHafs New In This Released 

.«h«n 9 «» In ((••» My^QL W9rkb*f*th rntt***. 


H 国 I 极關 

Ooc Vtottentfi Ranrt H|6Ql 

AspcrtBr Team BIm 


f SQL Development 

Coramt to «an(t(i9 Mab»\rx ama run 
SQL Qu«n«s. SQL icnpu. *dn (Mca and 
m«n«9« d«(«b«K ob)«cU 


_ I Data Modeling 

C，Mt* «nd m«MQ« imxMt. tan 
^eaagg|fi|||MO(np*rc and 


f 


CwtfMcOOAto Start Q% 0 ty*ftq 




Opttt EMtdMfl EIR Mo4el 


◎ 

c 


Server Administrate 

Corrf>ourt your an 廉 Mm server, Miup 
«nrr 籲 ccountv troaric tiatui 


—5, UH T^btm Data 

MAAftO* CAAIMettOM 




do 


CrMka Hmw UR Hod«l 

Omk* CCR Modal from CieMin« OatsbaM 

CfMM OR Modal from SQL Script 


... Import / Export 

Manage S 



A SQL Cdcor 4Loul»ioM) i 

felAMACCMDlfT Mi> 

MySOL Workbench 

Idmtr (mriqtd#kKa(ho»t) 

Wv«r StMiM 

0 U0%t9 f 

M Sutiji Syut«« Virvafeiei 

CONMCUWATIOX 

y* Opconir^t 

MK) SYSTIM URVU HOU.TY4 

I I 

SUfcrt RiMinint (to* -- v«««b t ，《 MIb -- Cm%» CMomct 

COMIICTIOMI 

W UMT HM( M Comma0*« Ttow# tuw 

UC1MITV 

-• U*«rt «nd •，，_•»* 

OATA U9CMT / HtSJOlU 

* 0*u (apon tnc aneer* 

422 root »0C«lh9»teim mjMfo SHt9 m 

423 root l0C40¥wt6im ract.Mfo »Mp $7» 

U% root loc^Mt S2t74 <^fy 0 SHOW MfeOC($$U$T 

root loulho^t S297) S4«p 0 

WtAdMn Opened 

KNI Qutrv « n CorvnKtiOfi 【 Acilrctli j 



Create a new connection in the SQL Development section by clicking New 
Connection and completing the screen that pops up. Then, double-click on your 
new connection to open it. 


f 


SQL Development 

Co<tn«ct to existing dautx*ses ar>d run 
SOC Qutncs. SQL Kripti. edit d*U and 
manftQt daui>M« octets. 


: 


Open Connection to Start Querying 


Connrct to Dattiba^r 


Stored Connection ： 




Connection Method ^tiindard (TCP/IP) 


會 AO 今 




Parameters AdvarKcd 


Hostnimc ： 127.0.0.1 
Username, root 


Port ： 3306 


Pass¥vord: Store in KcyUuin . 

Obulr Schema 


Clear 


Name nr IP addrrtt nt the wfvrr hA«t TCP/F port 
Piame of the uvr to ronn#ct vuitt) 

The users pus word. 

Tbt KbtfTM itut «HII b« mi dvf«ul( ubemi 


♦ *M 
B 从 

臂 AMWM* 

""f AM*M*«* 


I o.ov*»«i O' ■ 


片 New Connection 
— v Edit Table Data 






Edkt SQL Script 


Maf\a^e Conoections 


Cancel 


OK 



For more help on MySQL or MySQL Workbench, visit http:/ / dev.mysql.com/doc/. 
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Symbols 

S.containsO method 114 
$ (dollar sign) 

and array names 151 

for PHP variables 352 

for jQuery function shortcut 12, 19, 33 

for variable storing elements 150 

S_GET[ ] associative array 331 
S—POST[] associative array 331 
S_POST object 342 
游 —POST variable 369 
$(this) selector 63-64, 74, 88 
&& (and) operator 240 

{ } (curly braces) 

for code block 25, 42 
for function block 101 
for loops 230 

• (dot) operator 221. See also . (period) 

==(equality operator) 109,240 
and if statement 239 

=(equals sign), for setting variable value 56, 105, 
===(exact equality operator) 240 
> (greater than) operator 240 
>=(greater than or equal to) operator 240 

# (hash mark) 

for CSS id 13 
for id selector 49 

!= (inequality) operator 240 

<=(less than or equal to) operator 240 

! (negation) operator 240 

-= operator 207 

*= operator 207 


Index . 

/ = operator 207 
+= operator 207 
=> operator, in PHP 353 
(or) operator 240 

()(parentheses), for click method 42 
• (period) 

to separate selector from method 25 
to start CSS class 13, 48 

<?php and ?> tags 343, 352, 369 

+ (plus), for concatenation 57 

“ ’’ (quotation marks) 

for text or HTML value 57 
for selectors 15 

;(semicolon) 

to end j Query statement 16, 25 
to end PHP line 315, 352 

j (square brackets) 
for array 225 
for array item index 226 
in PHP function 315 

07 A 

absolute movement of elements 206 
absolute positioning of elements 180 
Accordion widget 378 

actions 

of forms 329 
repeating 229-230 

active state, for anchor element 21 
addGlassO method 117 ， 118, 172 
addition operator (+=) 207 
advanced easing 456 
a element. See anchor element (HTML) 


this is the index 483 


the index 


afterO method 159-160 

Ajax (Asynchronous JavaScript and XML) 291 ， 296—298, 
324, 420 

components 298 

for loading information 320 

time for using 300 

ajaxO method (jQuery) 296, 304 
getXMLRacers function call 307 
parameters 304 
testing 305 
timeout setting in 312 

alert function 42, 45, 50 

for checking discount variable 58 
for click event 80 

Amazon GloudFront 451 

anchor element (HTML) 
nested image 22 
states 21 

and (&&) operator 240 

animate element, position property and 181 

animate0 method 182, 208, 214 
adding to script 209 
do-it-yourself effects with 199 
limitations 200 

style changes over time 202-204 
syntax 201 

with relative movement 208 

animation 

color 208, 456 
of elements 188 

method chains for combining 193 
option for turning off 208 
plug-ins for 376 
queues for 454 

anonymous functions 101,102 

Apache web server 462 

installing on Windows 465—466 

APIs (application programming interfaces) 411, 413, 445 
Google Maps. See also Google Maps 
sample code 414 
object use by 415-416 

appendQ method 59, 74, 237 


appendToO method 237 

Apple’s Safari 84 
layout engine 182 
apps, building without Flash 176 
arguments 106, 114 
arithmetic operators 207 
array—push() function (PHP) 354 

arrays 91, 151-152, 167, 174, 218, 252 
accessing 226 

adding and updating items 227—228 
blackjack data in 225-228 
creating 354 

eachO method for loop through 168 
finding elements in 172 
JavaScript for emptying 246 
PHP rules for 353 
setting length to zero 246 
storing elements in 150, 152 
variable existence in 232 
writing contents of 353 

ASG keyword (SQL) 345 

assignment operator, = (equals sign) as 207 

associative arrays 331, 353 

combining into single array 354 
converting to JSON-encoded string 361 

asynchronous browsers 300 
Autocomplete widget 378, 406 

B 

background color, changing 16 
background-color property (CSS) 403 
before0 method 159—160 
binding events to element 81, 85 
.bindf) method 91 

Bit to Byte Race project 

getXMLRacers function 307-308 
repeated calls 312 
testing 309 

initial appearance 293-295 
requirements 292, 326 
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startAJAXcallsO function 311—312 
testing 305, 363 

blackj ack application 216-250 
adding excitement 250-251 
array for card deck 227-228 
arrays for organizing data 225-228 
code 233—234 
endO function 250 
function for event listeners 243—244 
hand object 237-238 
HTML and CSS code 236 
page setup 222 

reset feature for new game 245-248 
rules 216, 238 

Blind effect 378 

block-level element 50 

blurO method 256 

body element (HTML) 8 

break command, for loops 237 

browser cache 96 

browser layout engine 182 

browsers 

Ajax for passing data to 298 
asynchronous 300 
events 82 
listeners 79 

JavaScript interpreter in 5 

onblur and onfocus to respond to events 259 

andPHP 341 

testing page in multiple 29 

viewport 7 

web page display 7 

and window object 256 

browser wars 84 

button elements 16, 79 

buttons 

for interactive menu 133—134 
actions 135-138 
styling 386—389 

buttonsetO method (jQuery UI) 386 
button widget 386,410 


c 

calendar, for form data entry 373 

case sensitivity 

of function names 102 
of variable names 60 
of XML tags 327 

GDNs (content delivery networks) 451 
chaining methods 142 

checkForGode function 119—120 
testing 121 

child of child element, selecting 67 

childrenO method 140, 141， 144 
filter methods and 162 
child selector 67 
Chrome Developer 71 
classes 

in CSS 13, 48, 119 

for interactive menu 130 

maximum 60 

name restrictions 60 

and selectors 52-54 

to specify div element for action 47 

class selector 13, 14, 48 

combining with descendant selectors 67 
class transitions 456 
clearlnputsO function 333 
clearlntervalO method 258, 263, 264, 310 
clearOverlaysO function 435 
clearTimeoutO method 258, 263, 310 
clickable div element 24 

clickable tabs, plug-in to convert ul element to 293 

click event 42, 79 
adding to page 45 
handler function in 104 
limiting number 184 
limiting user to one 78 
for Monster Mashup 182—184 
testing 88-89 
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click event listener 

adding to getAHSightingsO function 425-426 
for sending form data 333—334 

clickMe div element, style for 24 

click-related functions, combining 270—272 

client-side scripting 19 

client-side validation 455 

clip property (CSS) 180 

closest method 148 

closures 458-459 

code block, { } (curly braces) for 25, 42 
color 

animation 208, 456 
j Query to change background 16 

color mixer 

refreshSwatch function 402—404 
slider for 399-402, 406 

columns in SQL database 338 

comments 45 
in CSS 294 
comparing values 244 

comparison operators 240-242 
in PHP 353 
concatenation 57 
testing 72 

conditional logic 108, 109—111 ， 122, 239, 280 
for runners list 362 

operators for decision process 240—242 
PHP rules for 353 

for turning off scheduled events 320—322 
contains method 111 
Content Delivery Networks (GDNs) 451 

convenience methods 

for Ajax in j Query 320 
for binding events 81 

counter, for array processing 168 
create database statement (SQL) 336 
CREATE TABLE statement (SQL) 336 
CREATE USER statement (SQL) 336 


Gryptid Sightings form. See sightings form 

CSS (cascading style sheets) 4 

background-color property 403 
vs. DOM notation 208 
file example for page tabs 294 
in j Query UI 401 
j Query UI themes and 379 
limitations 3 

link to j Query UI file 381 
methods to change 115—116 
properties 13, 188 

CSS class 13, 48, 119 

CSS id 13 

CSS selectors 13 

in j Query function 12 
vs. j Query selector 14, 51 

curly braces ({ }) 

for code block 25, 42 
for function block 101 
for loops 230 

current position 

movement relative to 280 
setting 276 

current property, animate0 impact and 205 

custom functions 100 
optimizing 290 
reset 283-285 

D 

data 57 

adding to Google Maps 423-426 

Ajax for passing in structured format 298 

arrays for storing 151—152 

collecting from web page 328—330 

formatting before sending to server 332 

getting from server 325 

MySQL database for storing 335 

objects for storing 218 

PHP to access 341, 347-349 

sanitization and validation in PHP 364—366 

sending to server 333—334 
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database. See also MySQL database 
connecting with PHP 343 
inserting data with PHP 331 

database query 359 

database servers 335 

data structures 218 

dateO function (PHP) 315—316 

Date object JavaScript) 295 

datepicker 410 

customizing with options 383 
for form 381 
testing 385 

datepicker0 method 382 

db_connectionO function (PHP) 347-349, 357, 359 

dealO function 234 

debugging jQuery code 453 

decimal numbers, for slider widget 397 

declaration for XML 299 

declaring function 101, 103 

vs. named function expression 102 
declaring variables 56, 186 
in loop 230 

delayO method 263, 264, 310 
dequeueO method 454 
descendant selectors 67 

detachO method 

testing for interactive menu 153 
vs. remove0 136—138 

developer 

j Query version for, vs. production version 19 
plug-in from 374 

Developer Default setup type for MySQL install 472 

development environment setup xxxii—xxxiii, 461—482 
MySQL database 

checking for install 464 
installing on Mac OS X 474—482 
installing on Windows 468-473 
PHP 462-463 
install 466—468 
web server 465—466 


die command (PHP) 343 
discount code 

custom function to check for 112 
testing 121 

discount variable 

testing concatenation 72 
testing display 61—63,64 

display property (CSS) 188 
of img element 22 
Distance API 437 

div element (HTML) 8, 39—40, 178, 179, 181 
action for specific 47-49 
clickable 24,45, 182-184 
clickable tabs to display 293 
click event for 42 
for Google map 416 
for images 40 
left property 206 
for radio button group 386 
for tab content 295 

divide operator (/ =) 207 
document loading, events for 82 
document object 284 

Document Object Model (DOM) 7, 8 
creating elements and adding events 81 
inserting HTML content into 159—160 
j Query and 9—11,19 
manipulating 174 
and selected elements 149 
traversal 140—144, 174 
vs. CSS notation 208 
web menu structure 126—129 

document property of window object 258 
document structure, HTML and 4 

dollar sign (5) 

and array names 151 

for PHP variables 352 

for j Query function shortcut 12, 15, 19, 33 

for variable storing elements 150 

DOM. See Document Object Model (DOM) 
domain, for Apache install 465 
DOM inspectors 71 
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dot (.) notation 

for JSON object 350 
for getting properties 218 

dot (.) operator 221. See also period (.) 

do...while loops 229, 234, 237 
syntax 230 
downloading 

IIS (Internet Information Server) 465 
jQuery UI 379 
MySQL installer 470 
for Mac 476 

script blocking parallel 50 
Draggable widgets 401 
drop-down list in HTML form 328 
Droppable interaction 378 
Droppable widget 401 
Dump plug-in 453 

dynamic web pages 
PHP to create 314 
updates 296 

E 

eachO method 91, 92 ， 114, 168 
and findf) method 306 
looping through array elements with 362 
and this keyword 172 

Earth API 437 
easing functions 456 

echo command (PHP) 315, 342, 353, 369 
effects in j Query UI 456 
effects plug-ins 376 
elements 

absolute vs. relative movement 206 

adding event listeners to 80 

animating 188 

binding events to 81, 85 

block-level 50 

emptying content 148 

id selector to match single 49 

index for list items 110 

length property to check for existence 430 

loop through group of 90 


order of adding or removing 68 

positioning, absolute or relative 180 

relationships, and DOM traversal 141-146 

relative movement of 207 

removing from page 66 

replaceWithO method for changing 154—158 

selecting all on page 60 

storing 

in array 152, 167 
in variables 149-150 
wrapping inside another element 172 

element selector 13, 14 

Elevation API 437 

else clause (PHP) 353 

else if clause (PHP) 353 

else if statement 239 

else statement 109, 239 

emptyO function (PHP) 364 

emptying array, JavaScript for 246 

empty method 148, 246 

endO function, for blackjack 250 

end parameter, of slice method 172 

eqO method 161 

equality operator (==) 109, 240 
and if statement 239 

equals sign (=), as assignment operator 56, 105, 207 
error 

in XML, and broken page 327 
server return of 312 

event handlers 

named functions as 103 
for slider widget 391 

event listeners 79, 85, 87 
behind the scene 80 
function for 243—244 

events 79, 122 

binding to elements 81, 85 
categories of 83 
development history 84-85 
functions in 83 
removing 86 
scheduling 310 
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triggering 82—83, 91 
turning off scheduled 320—322 

exact equality operator 240 

Explode effect 378 

extensible Markup Language. See XML (extensible 
Markup Language) 

F 

fade effects 192, 214 

fadelnO method 

in method chain 193,196 
parameters for 192 

fade methods 27-28, 33 

fadeOutO method 189 

in method chain 193,196 
fadeToO method 189 
fail function 357, 365 
fields in HTML, hidden 329, 364 
file, for j Query code 93—95 
filterO method 162 
filter methods 161—164, 174 
find。method 172, 306, 361 

Firebug for Firefox 71 
Net tab 305 

Firefox (Mozilla) 84, 265 

firstf) method 161 

Flash, building app without 176 

floorO method 71 

focus 

change, and running functions 255 
window with 256 

focusO method 256 

folders, for j Query library 93—95 

font properties 200 

footer of web page 317 

foreach loop (PHP) 352 

for.. .in loop 237 

for loop 229, 234 


in PHP 352 
syntax 230 

formatting data 

before sending to server 332 
PHP for 354 

form element (HTML) 328—330 

HTTP GET or POST methods 331 

input buttons in 386 

selecting input elements on 407 

form events 82 

forms 328-330 

Autocomplete suggestions for field 406 
distrusting data in 364 
planning 373—374 
validation 406, 455 

FROM keyword (SQL) 345 

function callback, slide event attached to 391 

function expression 101,103 

function keyword 101, 194, 220, 224 

within another function, and variable access 458 
functions 79, 100—108, 122, 148 
anonymous 101, 102 
call to itself 194 
for click event 42 
code line length 308 
combining click-related 270-272 
creating 101 
custom 

optimizing 290 
reset 283-285 
declaring 101， 103 

vs. named function expression 102 
in events 83 

inside each() method 168 
named, as event handlers 103 
passing variables to 106 
repeated calls 312 
return value for 107， 114 
running, focus change and 255 
self-referencing 311—312 
syntax 101 

timed, for repeated action 194 
variable for return value 232 

fx queue 454 
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G 

Gecko layout engine 182 
Geocoding API 437 

getAHSightingsO function 422, 423, 429-430 
adding click event listener 425-426 
getAHTypesO function 429—430 

GET data, from ajax() method 
304 

getDBRacersO function 356-360, 358 
to readJSON object 361—362 
getJSONO method 320, 351, 358, 369 

GET method 
for Ajax 320 

for HTTP, to send data to server 331 
getRandomO function 120, 231, 234, 276, 277, 280 
creating 108 

getScriptO method for Ajax 320 
getSightingsByTypeO function 432—435, 439—440 
getSingleSightingO function 425—426 
“getters” 276 

getTimeAj ax() function 317—318 

getTimeO function 293 
calling 295 

getXMLRacers function 307 
repeated calls 312 
testing 309 

global scope 458 
goLightningO function 266, 268 
Google Ajax API GDN 451 

Google Chrome 84, 265 
Developer tools 305 
and j Query 148 
layout engine 182 

Google Directions API 437 
Google Earth plug-in 437 

Google Maps 

adding data to 423-426 
documentation 418, 438 
event listeners 438 
including in web page 417-418 


overlays 435 
points as markers 424 
sample code 414 
Terms of Service 437 
testing 419 

graphics. See images 

greater than operator (>) 240 

greater than or equal to operator (>=) 240 

grouping button widgets 386 

H 

handler functions 83 

hash mark (#) 
for CSS id 13 
for id selector 49 

head element (HTML) 8 
height property (CSS) 190, 214 
hidden HTML field 329, 364 
hidden value for overflow property 180 
hide effect, slowing down 196 
hide0 method 188 

hiding span element, conditional logic for 109—110 

highlighting, hovering and 115—116 

history property of window object 258 

hitO function 234 

hover event, adding 117—118 

hovering, and highlighting 115—116 

hover state, for anchor element 21 

HTML. See also Document Object Model (DOM) 
and document structure 4 
for slider widget 391 
inserting content into DOM 159—160 
limitations 3 
mixing with data 57 
PHP and 352 

separating j Query code from 97-98 
tags inside variables 57 
XML and 299 

html element 8 

htmlspecialchars0 function (PHP) 364 
HTML string, in j Query function 12 
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IDs 

in CSS 13 

and selectors 52-54 

to specify div element for action 47 

id selector 13 ， 14, 49 

combining with decendant selectors 67 
idTabs plug-in 293 

if statement 109—111，239 

==(equality operator) and 239 
ternary operator as alternative 244 

if statement (PHP) 353 

IIS (Internet Information Server) 462 
downloading 465 
images 

basing display on game result 250 
div element for 40 
invisible 181 

properties for building path to 234 
img element (HTML) 8 
in anchor element 22 
display property 22 
nesting 178 
sliding into view 26 

inArrayO method 231， 232 

index of element 110, 114 
in array 151, 168, 226 
and eqO method 161 
in loop 230 

index variable, for each function 172 
inequality operator (!=) 240 
infinite loops 255 
info.php script 463 
initialization of loop 229 
initialize 0 function 417—418 

input elements (HTML) 328 
datepicker for 381 
selecting on form 407 

inserting 

data into database, PHP for 331 
HTML content into DOM 159—160 


insert statement (SQL) 338-340 
installing 

Apache on Windows 465-466 
MySQL database server 
on Mac OS X 474-482 
on Windows 468—473 
PHP 466-468 

instances of object 220 
creating 221 

interaction plug-ins 376,401 

interactive menu 124—138 
buttons 133—134 
actions 135-138 
“Restore Menu” button 160 
restoring entries 146—152, 163—170 
testing 139 

interactivity 2 

example 20—30 

Internet Explorer (Microsoft) 84, 265 
layout engine 182 
invisibility, CSS for 22, 181 
iteration 90. See also loops 



JavaScript 5 

and Ajax 298 
emptying array 246 
for datepicker 381 
including files 295 
interpreter 

and animation process 188, 202 
and DOM 190 
jQuery and 9, 19 
JSON and 355 

keywords, and variable names 60 

objects 252 

vs. PHP 355 

variables 56 

window object 284, 290 

for timed effects control 256-259 
j Query 4, 5 

debugging code 453 

and DOM 9—11 

hosted copies on GDNs 451 
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j Query (continued) 
vs. JavaScript 19 
andJSON 351, 355 
methods 448—449 

production vs. developer versions 19 
selectors 13, 15, 33, 450 
vs. CSS selector 14, 51 
;(semicolon) to end statement 16, 25 
separating code from HTML 93-95, 97-98 
for slider widget 391 
translation 16-18 
web resources on 84 

j Query GDN 451 
jquery.com website 83 
j Query function 

$ (dollar sign) for shortcut 12, 15, 19, 33 
contents 12 

j Query library 

folder for 93—95 
including 40 

j Query namespace, noGonflictO method 452 
j Query plug-ins, creating 457 

jQuery UI 371， 410 

behind the scenes 382 
CSS in 401 
download page 379 
effects 456 
package contents 380 
plug-ins 374, 376 
button widget 386 

customizable options for widgets 383—384 
slider widget 390—398 
testing effects 376 
themes 379 
creating 401 
jQuery wrapper 12 

•js extension 96 

JSON (JavaScript Object Notation) 224, 325, 350—351, 
369 

jQuery and 351, 355 
with SQL and PHP 420—422 

json_encodeO function (PHP) 354, 358, 361 ， 369, 420 


K 

keyboard events 82 

key/value pairs 

for HTTP GET 331 
in PHP 353 

keywords in JavaScript, and variable names 60 
KML (Keyhole Markup Language) 300 



languages 

markup 299 
server-side 19, 314 

lastO method 161 
latitude, slider for 397—398 

LatLng object (Google) 415, 418 
defining 424 

left property, of div element 206 
length of array, setting to zero 246 

length property 
of array 225 

to check for element existence 430 
Lerdorf, Rasmus 355 
less than or equal to (<=) operator 240 

libraries 

jQuery 

folder for 93—95 
including 40 
PHP 344 

li element (HTML) 8 

assigning class to 131—132 
replacing in unordered list 155—156 

lightning effect 187 

adding functions to script 197 
image fade effect 192 
testing 269 

troubleshooting 254-255 
link to jQuery UI CSS file 381 
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lists 

of elements, index of 110 
unordered 128-129 

.liveO method 91 

loading information, using Ajax for 320 

local files, for web pages, vs. web server 341 

localhost 348, 463 

local scope 458 

logical operators 240—242 

longitude, slider for 397-398 

loops 229-230, 252 

to change multiple elements 9, 90 
declaring variables in 230 
eachO method for 168 
and array elements 362 
infinite 255 
in PHP 352 
syntax 230 
types 237 

M 

Mac OS X 

default web server 462 
determining MySQL install status 464 
enabling PHP 474 
installing MySQL on 474—482 

many-to-one substitution 158 

map_canvas element 417—418 

map events, listening for 438 

map object 

creating instance 417—418 
properties and methods 416 

map Opts property 418 

Map Quest 418 

Marker object (Google) 424 

markup languages 299 

max option for slider widget 390 

menus. See interactive menu 


messages 

appendO to insert 59 
concatenation when creating 57 
displaying for user 55—60 
removing 66 

methods 

chaining 142 

for combining effects 193 
for CSS changes 115—116 
of objects 219 
static 114 

Microsoft GDN 451 

Microsoft IIS (Internet Information Server) 462 
downloading 465 

Microsoft Internet Explorer 84, 265 
layout engine 182 
Microsoft, maps 418 

Microsoft .NET Framework 4 Client Profile 472 
milliseconds setting, for fade effect 192 
min option for slider widget 390 
mobile device, maps on 437 

Monster Mashup 

click event 182—184 
do-it-yourself effects 199 
layout and positioning 178-180 
lightning effect 187 
testing 269 

troubleshooting 254-255 
project blueprint 177 
randomize feature request 274—277 
testing 278-280 
testing 273, 286 

motion effects 

with animate0 method 199 
relative to current position 280 

mouseenter event 117 
mouse events 82 
mouseleave event 117 
moveMe function 271—272 
moving through DOM 140—144 
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Mozilla Firefox 84, 265 
multiply operator (*=) 207 
MySQL 369 

MySQL Community Server 468 
mysql_connect function (PHP) 343 

MySQL database 

for storing data 335 
managing 344 

MySQL database server 462 
checking for install 464 
downloading installer 470 
installing 

destination folder for 471 
on Mac OS X 474 
on Windows 468—473 
troubleshooting guide 468 

MySQL functions (PHP) 467 

MySQL query browser 468 

MySQL Workbench 336, 337, 472 
opening 473 

select statement to see resultset 346 

N 

named functions 

vs. declaring functions 102 
as event handlers 103 

name property of window object 258 
names 

S for array 151 
of classes 60 
of functions 101， 102 
of variables 56, 60, 105 

namespace 457 

name/value pairs, for JSON 350 

negation (!) operator 240 

negative numbers, for slider widget 397 

nested elements 15 

nested image, in anchor element 22 

Netscape Navigator 84 


new keyword 220 

for array creation 225 
newO method 221 

nextO method 140, 141 
in method chain 142 
noGonflictO method 452 
not equal to operator (!=) 240 
notO method 162 
numbers 

in CSS property settings, animate0 method and 200 
slider widget for entry control 390—398 

0 

object constructors 220 

objects 84, 218-221 
API use of 415—416 
building 219 
reusable 220 
interacting with 221 
one-time vs. reusable 224 

onblur event handler of window object (JavaScript) 256, 
258, 259, 266 

testing 259-260 

one-to-many substitution 158 

one-to-one substitution 165—166 

onfocus event handler of window object JavaScript) 256, 
258, 259, 266 

testing 259-260 

OOXML (Office Open XML) 300 

opacity of HTML elements 27 

opacity property (CSS) 189, 214 

OpenLayers, mapping API 418 

optimizing custom functions 290 

option element (HTML), for drop-down list 328 

order by keyword (SQL) 345 

orientation option for slider widget 390 

or (I I) operator 240 

overflow property 180 

overlays in Google Maps 435 
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P 

package installer, for MySQL for Mac 477—479 
page load time, speeding up 50 
parallel downloads, script blocking 50 
parameters 106, 114, 197 
parentheses, for click method 42 

parentO method 140, 141 ， 145, 148 
in method chain 142 
parent selector 67 

parentsO method 148 
filter methods and 162 
passing variables to function 106 
Penners, Robert 456 
period (.) 

to separate selector from method 25 
to start CSS class 13, 48 

PHP (PHP: Hypertext Processor) 314, 324, 369 
to access data 341 ， 347—349 
data sanitization and validation 364—366 
development setup 462—463 
enabling on Mac OS X 474 
for connecting to database 343 
for inserting data into database 331 
formatting output 354 
installation 466—468 
checking for 463 
library selection 343 
vs. JavaScript 355 
JSON with SQL and 420—422 
libraries 344 
MySQL functions 467 
rules 352-353 

PHPMyAdmin 344 
picframe div element 24 
pictures. See images 
Places API 437 
planning 178 

plug-ins 302, 376 
configuring 293 
creating 457 
debugging 453 


plus sign (+)，for concatenation 57 
pop-up window，for alert statement 42 

position of elements 

absolute or relative 180 
setting current 276 

position property (CSS) 182 
of animate element 181 
POST data 

ajaxO method for 304 
on web server 342 

POST method 333 

for HTTP, to send data to server 331 
in Ajax 320 

p (paragraph) element (HTML) 8, 16 
changing HTML inside 9 
click event for 42 

preg—match function (PHP) 364 
prevO method 140, 141 
print command (PHP) 353 
print_rO command 353 

production version of jQuery, vs. developer version 19 

Progressbar widget 378 

project 

determining requirements 37—38 
planning 178 
structure 96 

properties 

animate0 method to change 201 
assigning value 224 
for building path to image 234 
of objects 218, 219 
accessing 221 
Puff effect 378 

querying 15 

queues for animation 454 

quotation marks 

for text or HTML value 57 
for selectors 15 
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R 

radio buttons, div element for group 386 
random animation in Monster Mashup 275—277 
randomizeO function 277, 281—282, 285 
randomO method 71 
random number 

testing concatenation into discount variable 72 
variable to hold 57-58 

random number generator function 112 

RDBMS (Relational Database Management Systems) 335 

readyO method 184-185, 452 

referencing variables 57 

refreshSwatchO function JavaScript), for color mixer 
402—404 

regular expression matching function 364 
relationships of elements, and DOM traversal 141—146 

relative movement of elements 206, 207 
to current position 280 
relative positioning of elements 180 
reloading, changing web pages without 4 
removeGlass method 117 

remove0 method 74, 92 
in method chain 142 
for message 66 
order of calls and 68, 70 
troubleshooting 71 
vs. detachO 136—138 

removing events 86 

repeated actions 229-230 
timed function for 194 
repeated function calls 312 

replaceWithO method 154-158, 165-166 
limitations 158 

replacing li elements in unordered list 155—156 
resetO function 283-285 
Resig, John 19 
Resizable widget 378, 401 

restoring interactive menu entries 146—152, 163—170 


resultset for SELECT statement 345, 346 
return keyword 107 

return value of function 114 
variable for 232 
reusable objects 

building 220, 223-224 
vs. one-time 224 

root node in XML 299 
RSS (RDF Site Summary) 300 
RSS (Real Simple Syndication) 300 
running functions, focus change and 255 



Safari (Apple) 84 
layout engine 182 

same-origin policy, and Ajax calls 305 
sanitizing data in PHP 364—366 
scalable object, Resizable widget for 401 
scale effects, with animate0 method 199 

scheduled events 
creating 310 
turning off 320—322 

scope, global vs. local 458 

screen display, PHP for writing to 353 

script element (HTML) 4, 45 

for Google Maps API code 417 
for jQuery UI 381 
for link to script file 93 
location of 50 

scripts 

adding animate0 functions 209 
adding lightning effect functions to 197 
and web page changes 5-6 
folder for 93 

Selectables widgets 401 

selecting 

all elements on page 60 
elements using traversal methods 141—144 
filter methods to narrow 161—164 
input elements on HTML form 407 
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selector engine for j Query 9 

selectors 33, 74, 130, 148 
% (this) 63—64 
CSS vs. j Query 51 
for datepicker 382 
descendant 67 
in j Query 13, 450 

.(period) to separate from method 25 
select statement (SQL) 345-346 
where clause 348 
〈 select〉tag (HTML) 328 
self-executing functions 102 
self-referencing functions 311—312 
semicolon (;) 

to end j Query statement 16, 25 
to end PHP line 315, 352 

serializeArrayO method 332, 369 

serialize)) method 332 

servers. See also web server 
GDNs and 451 
database 335 
error returned from 312 
formatting data before sending to 332 
sending data to 329, 333—334 

server-side languages 19, 314 

setlntervalO method JavaScript) 258, 263, 264, 265, 290, 
310 

browser variations 265 

setTimeoutO method JavaScript) 196, 198, 255, 258, 

263, 264, 290, 310, 312 

browser processing of 265 

showFrequency() method 317—318 

showO method 188 

siblings method 148 

sightings form 372—374 
code 384 
datepicker for 381 

getSightingsByTypeO function 432—435 
Google map 412-413 
multicreature checklist 428 
project checklist 380 
testing 389, 405, 427, 431 


sliceO method 162,172 
slideDownO method 26， 190 

slide effects 214 

and element height 190 
slider widget 410 

for color mixing 399—402 

for controlling numerical entries 390—398 

for longitude and latitude 397—398 

negative numbers and decimal numbers 397 

planning 373 

testing increments 396 

slideToggleQ method 26,28, 190 

slideUpO method 190 
for image 26, 52 

SOAP (Simple Object Access Protocol) 300 
Sortable widgets 378, 401 

span element (HTML) 317—318 
conditional logic to hide 109—110 
speed of fadeln 27 

SQL (Structured Query Language) 335, 369. See 
also MySQL 

for database, table and users setup 336—337 
insert statement 338-340 
JSON with PHP and 420-422 
SELECT to read data from 345—346 
testing connection 344 

square brackets ([]) 
for array 225 
for array item index 226 
in PHP function 315 

standards for browsers 84 

startAJAXcallsO function 311—312, 322, 356, 358 

start parameter, of slice method 172 

Static Maps API 437 

static methods 114 

static web pages 3 

step option for slider widget 390 

stopLightningO function 266, 268 

stop method 208 

storage space, creating 56 

storing elements in array 152 
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structure of project 96 
styles 23 

class or ID and 60 
submitO listener 333 
substitution 

one-to-many or many-to-one 158 
one-to-one 165—166 

subtraction operator (- =) 207 
success function 357 
sumGardTotal method 242 
SVG (Scalable Vector Graphics) 300 
switch method 244 

T 

tables in MySQL databases 335 
tags in XML 299 
Task Manager, Services tab 464 
templates for jQuery 459 
terminator 148 
ternary operator 244 
test condition in loop 229 
testing 

Bit to Byte race project 305 
click event 46, 88—89 
datepicker 385 

detachO method for interactive menu 153 
discount variable display 61—63, 64 
getXMLRacers function 309 
Google Maps API 419 
interactive menu 139 
lightning effect 269 
Monster Mashup 286 
onfocus and onblur event handlers 259-260 
random number concatenated into discount variable 
72 

sightings form 389, 405 
slider widget increments 396 
SQL database connection 344 
web page in multiple browsers 29 

text box in HTML form 328 


text effects 200 

themes in j Query UI 379, 380 
creating 401 

this keyword 63, 168, 209 
eachO method and 172 
origin of use 71 
plug-ins and 457 

timed effects, window object to control 256—259 

timed functions 290 

for repeated action 194 
timeout 

interval 255 

setting in ajax() call 312 

TimeoutO method 194 
timer for animation 202 

timer methods 263-265, 310 
of window object 256 
time zone, for PHP date function 315 
title element (HTML) 8 
toggleO method 188, 196 
transparency of HTML elements 27 
traversing DOM 140—144, 174 
Trident layout engine 182 
triggering events 82—83,91 
.trigger0 method 91 

troubleshooting lightning effect 254—255 
turning off animation, option for 208 

u 

ul element (HTML) 8 

plug-in to convert to clickable tabs 293 

UML (Unified Modeling Language) diagram 219, 
223-224 

unbind command 86 
“Undefined Index” error 226 
“undefined” value, function return of 114 
unnamed functions 101 
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unordered list 128-129. See also ul element (HTML) 
assigning class to items 131—132 
method chain to traverse 142 
replacing li elements in 155—156 

user interface. See also forms; jQuery UI 

slider widget for controlling numerical entries 390— 
398 

user requirements, determining 37—38 
utility function 276 

V 

validating 

data in PHP 364—366 
forms 406, 455 

valO method 391 

value 

for object property 218 
option for slider widget 390 

VariableDebugger plug-in 453 

variables 56, 148 

in anonymous functions 102 
vs. arrays 218 
assigning value to 207 
for clearlntervalO method 264 
counter for array processing 168 
declaring 186 
in loop 230 

for return value of function 232 

for storing elements 149—150 

function keyword within another function and 458 

in array 225, 232 

in functions 105 

name restrictions 60 

passing to function 106 

in PHP 352 

referencing 57 

var keyword 56, 105, 219 

viewport of browser 7 

visibility of img element 22 

visual effects, example 20—30 

visual properties of elements 188 


W 

W3C (World Wide Web Consortium) 19 
Webkit browser layout engine 182 
web page power 2 
web pages 

adding message to 60 
broken from XML errors 327 
browser display 7 
browser request for 3 
changing without reloading 4 
collecting data from 328-330 
delivery by web server, vs. local files 341 
dynamic, PHP to create 314 
dynamic updates 296 
footer 317 
hidden structure 8 
including Google Maps 417-418 
PHP to write to 315 
scheduling events 310 
turning off 320-322 
scripts to change 5-6 
static 3 
tabs 

adding 329—330 
CSS file example 294 
testing in multiple browsers 29 
updating new data only 297 

web resources on j Query 84 
web server 

determining existence of 463 

for PHP scripts 341 

for web pages, vs. local files 341 

local computer as 462 

POST data on 342 

setup 465—466 

where clause in SQL SELEGt statement 348 

while loop 237, 359 
in PHP 352 

widget plug-ins 376, 410 

customizable options 383-384 
for interactions 401 
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window, lost focus, and running functions 255 

window object JavaScript) 284, 290 
for timed effects control 256-259 

Windows Azure 451 

World Wide Web Consortium (W3C) 19 

X 

XHTML 300 

XML (extensible Markup Language) 298, 299-300, 324 
declaration 299 
errors and broken pages 327 


file listing 305 
vs.JSON 350 
parsing data 306 
server for file storage 305 

XMLHttpRequest object 312 

Y 

Yahoo! 418 

z 

zero-indexed arrays 226 

zero, setting array length to 246 
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